Animations CSS : Guide Complet avec Keyframes

Les Bases des Animations CSS

Les animations CSS permettent de creer des transitions visuelles sans JavaScript. Elles reposent sur deux mecanismes : les transitions (animation simple entre deux etats) et les keyframes (animation complexe avec plusieurs etapes). Les transitions reagissent a un changement d etat (hover, focus, classe ajoutee). Les keyframes definissent une sequence d animation autonome.

La syntaxe d une transition est directe : transition: opacity 0.3s ease-in-out anime la propriete opacity sur 300 millisecondes avec une acceleration et deceleration douce. Vous specifiez la propriete a animer, la duree, la fonction de timing et un eventuel delai.

Les keyframes offrent plus de controle. Vous definissez des etapes intermediaires avec @keyframes puis appliquez l animation a un element avec la propriete animation. Cette approche permet des mouvements complexes, des boucles et des sequences multi-etapes impossibles avec les transitions simples.

Proprietes Animables

Toutes les proprietes CSS ne sont pas animables. Les proprietes numériques (opacity, transform, width, height, margin, padding, font-size) s animent bien. Les proprietes discretes (display, visibility, font-family) basculent instantanement sans transition.

Pour les performances, privilegiez transform et opacity. Ces deux proprietes sont composees par le GPU et n entrainent ni recalcul de mise en page ni repaint. Animer width, height ou margin force le navigateur a recalculer la mise en page de toute la page a chaque frame.

Utilisez transform: translateX() au lieu de modifier left. Utilisez transform: scale() au lieu de modifier width et height. La difference de fluidite est considerable, surtout sur les appareils mobiles.

Fonctions de Timing

Les fonctions de timing controlent la vitesse de l animation au fil du temps. ease (par defaut) demarre lentement, accelere au milieu et ralentit a la fin. linear maintient une vitesse constante. ease-in demarre lentement et accelere. ease-out demarre vite et ralentit.

Pour un controle precis, utilisez cubic-bezier(x1, y1, x2, y2). Les quatre valeurs definissent les points de controle d une courbe de Bezier. Des outils visuels permettent de creer des courbes personnalisees sans calculer les valeurs manuellement.

Les animations naturelles utilisent rarement linear. Dans le monde physique, les objets accelerent et decelerent. Un ease-out pour les apparitions et un ease-in pour les disparitions imitent ce comportement physique.

Bonnes Pratiques

• Respectez les preferences utilisateur : La media query prefers-reduced-motion detecte les utilisateurs qui ont desactive les animations dans leurs parametres systeme. Desactivez ou reduisez les animations pour ces utilisateurs.
• Duree appropriee : Les micro-animations (boutons, toggles) doivent durer 100 a 300 ms. Les transitions de page ou les apparitions d elements peuvent durer 300 a 500 ms. Au-dela de 500 ms, l interface semble lente.
• Animation deliberee : Chaque animation doit avoir un objectif : guider l attention, indiquer un changement d etat ou fournir un retour visuel. Les animations purement decoratives fatiguent rapidement.

Notre Generateur d Animations CSS

Notre Generateur d Animations CSS vous permet de creer des animations visuellement. Definissez les keyframes, ajustez le timing et la duree, previsualez le resultat et copiez le code CSS genere. Pas besoin de memoriser la syntaxe — experimentez visuellement.