Générateur d'animation CSS (keyframes)

Choisissez un modèle d'animation, ajustez la durée, le rythme et la répétition, visualisez le résultat en direct puis copiez le code @keyframes complet. Traitement 100% local — rien n'est envoyé à un serveur.

Exemple :

Animation

Durée (s)

Courbe de rythme

Délai (s)

Répétition

Code CSS

@keyframes fade-animation {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.mon-element {
  animation: fade-animation 1.2s ease-in-out 0s infinite;
}

Comment ça marche

La règle @keyframes décrit l'état d'un élément à différents pourcentages de la durée d'une animation, tandis que la propriété animation raccroche cette séquence à un élément avec une durée, un rythme et un nombre de répétitions. Choisissez un modèle prêt à l'emploi (fondu, rebond, rotation...), ajustez les paramètres et récupérez le code final avec sa règle @keyframes et sa déclaration animation.

Comment appliquer cette animation à mon propre élément ?

Copiez la règle @keyframes telle quelle dans votre feuille de style, puis remplacez le sélecteur .mon-element par la classe ou l'identifiant de l'élément HTML que vous souhaitez animer.

Quelle courbe de rythme choisir ?

ease-in-out convient à la majorité des animations d'interface car elle démarre et se termine en douceur ; linear est plus adaptée à une rotation continue (comme un indicateur de chargement), tandis que ease-out donne un effet d'arrivée franche souvent utilisé pour les apparitions d'éléments.

Le code est généré et prévisualisé entièrement dans votre navigateur, sans connexion à un serveur.