Générateur d'animations CSS

Choisissez un preset, réglez la durée, l'accélération, les itérations et la direction, et observez la lecture dans l'aperçu. Copiez le @keyframes et la propriété abrégée en un clic quand le résultat vous convient — tout fonctionne dans votre navigateur.

Preset

Durée1.0s

Délai0s

Fonction de temporisation

Direction

Nombre d'itérations1

Infini

Mode de remplissage

Nom de l'animation

CSS généré

Tout fonctionne dans votre navigateur. Aucun téléversement, aucune inscription.

Comment ça marche

STEP 1

Choisissez un preset

Commencez par fondu, glissement, rebond, pulsation, rotation ou secousse. La zone d'aperçu rejoue le mouvement dès que vous choisissez, afin que vous voyiez exactement ce que ça fait.

STEP 2

Réglez la durée

Ajustez la durée, le délai, l'accélération, le nombre de répétitions et la direction. Appuyez sur Rejouer à tout moment pour voir les nouveaux réglages en action.

STEP 3

Copiez le CSS

Copiez le bloc @keyframes et la propriété abrégée en un clic et collez-les dans votre feuille de style — rien n'est téléversé.