UTILS.
100 % dans le navigateur
⤿

Générateur d'animation CSS

Construisez une animation par keyframes, prévisualisez-la en direct et copiez le CSS.

À propos de cet outil

Choisissez une animation prédéfinie avec une durée, une fonction de timing et un nombre d'itérations, regardez-la s'exécuter en direct, puis copiez les règles @keyframes et animation. Tout s'exécute dans votre navigateur.

Foire aux questions

Que contrôle le nombre d'itérations ?
Il définit combien de fois l'animation se joue ; choisissez infinite pour boucler indéfiniment ou un nombre pour l'exécuter ce nombre de fois.
Comment relancer l'animation ?
Appuyez sur Rejouer — cela retire brièvement puis réapplique l'animation afin que l'aperçu se rejoue depuis la première keyframe.

Plus d'outils