6XC

Générateur d'animation CSS

Choisissez un préréglage de keyframes — rotation, pulsation, rebond, secousse, fondu, glissement — ajustez la durée et les répétitions, copiez @keyframes + la classe.

633 vues

Les animations CSS

Une animation associe un bloc @keyframes (ce qui change) à la propriété animation (comment elle se joue : durée, timing, nombre d'itérations). Contrairement aux transitions, elles s'exécutent de façon autonome, sans survol ni changement de classe. Ce générateur propose six préréglages prêts à l'emploi et fournit à la fois les keyframes et une classe prête à l'emploi.

Questions fréquentes

Animation ou transition — laquelle choisir ?

La transition réagit à un changement d'état (survol, classe). L'animation s'exécute d'elle-même, peut boucler à l'infini et définir plusieurs étapes — utilisez-la pour les spinners, les pulsations d'attention et les effets d'entrée.

Comment respecter les utilisateurs préférant moins de mouvement ?

Enveloppez l'animation dans @media (prefers-reduced-motion: no-preference) { … } ou désactivez-la dans la variante réduite — les utilisateurs sensibles aux troubles vestibulaires vous en seront reconnaissants.

Outils similaires

Générateur de dégradé CSS Concevez des dégradés CSS linéaires, radiaux et coniques avec aperçu en direct et copiez le code. Lancer Générateur d'ombre CSS (box-shadow) Concevez une box-shadow visuellement — décalages, flou, étalement, couleur, opacité et inset — avec aperçu en direct. Lancer Générateur de border-radius CSS Arrondissez chaque coin individuellement ou tous à la fois, en px ou %, avec aperçu en direct et CSS copiable. Lancer Générateur d'ombre de texte CSS Concevez un text-shadow avec décalages, flou, couleur et opacité — aperçu en direct sur un texte d'exemple. Lancer