Générateur d'Animations CSS
Le générateur d’animation CSS crée des animations @keyframes à partir de 14 préréglages comme l’apparition en fondu, le glissement, le rebond, la pulsation, la rotation, la secousse et le zoom, avec des réglages de durée, de fonction de timing et de nombre de répétitions.
À propos de cet outil
Le générateur d’animation CSS crée des animations @keyframes à partir de 14 préréglages comme l’apparition en fondu, le glissement, le rebond, la pulsation, la rotation, la secousse et le zoom, avec des réglages de durée, de fonction de timing et de nombre de répétitions.
Mode d’emploi
- Choisissez un préréglage d’animation.
- Réglez la durée, la fonction de timing et le nombre de répétitions.
- Appuyez sur Rejouer pour la prévisualiser.
- Cliquez sur Copier le CSS pour obtenir la règle @keyframes et la règle animation.
Bon à savoir
- Une animation CSS comporte deux parties : une règle @keyframes et une propriété animation sur l’élément.
- Animer transform et opacity est généralement le choix le plus fluide en termes de performances.
- Les fonctions de timing comme ease-out démarrent vite puis ralentissent, ce qui paraît naturel pour les apparitions.
- Respectez la media query prefers-reduced-motion pour les utilisateurs qui ont demandé moins de mouvement.
- Un nombre de répétitions infini convient aux loaders ; les effets d’apparition ne s’exécutent généralement qu’une fois.
Fonctionne entièrement dans votre navigateur : rien de ce que vous saisissez n’est envoyé ni stocké.
Questions fréquentes
Comment créer une animation CSS ?
Définissez le mouvement dans une règle @keyframes, puis associez-le avec animation: name duration timing iteration. Le générateur écrit les deux pour vous.
Quelle est la différence entre les transitions et les animations CSS ?
Les transitions animent le passage entre deux états lorsqu’une propriété change, par exemple au survol. Les animations utilisent des keyframes, peuvent démarrer automatiquement et tourner en boucle.
Comment faire tourner une animation en boucle infinie ?
Réglez le nombre de répétitions sur infinite, par exemple animation: spin 1s linear infinite.
Les animations CSS ont-elles un impact sur l’accessibilité ?
Des mouvements amples ou continus peuvent gêner certains utilisateurs. Placez les animations non essentielles dans @media (prefers-reduced-motion: no-preference).