HTML CSS JS

Les animations donnent vie à votre site. Bien utilisées, elles guident l'attention et rendent l'expérience mémorable. Mal utilisées, elles distraient et ralentissent. La clé est la subtilité.

Transitions vs Animations

Transition = un changement fluide entre deux états (A → B). Toujours déclenché par une action : hover, focus, clic, ajout d'une classe.

Syntaxe : transition: propriété durée timing-function;

Exemple : transition: transform 0.3s ease; signifie "quand transform change, fais-le en 0.3s avec une courbe ease".

Animation = un mouvement prédéfini avec des étapes, qui peut boucler. Peut se lancer automatiquement.

Syntaxe : on définit les étapes avec @keyframes, puis on applique avec animation.

La syntaxe transition

transition: propriété durée timing-function délai;

• propriété — quelle propriété animer (transform, opacity, color, all)
• durée — combien de temps (0.3s, 200ms)
• timing-function — la courbe de vitesse :
  • ease (défaut) — démarre lent, accélère, ralentit à la fin. Le plus naturel.
  • ease-in — démarre lent, finit vite
  • ease-out — démarre vite, finit lent
  • linear — vitesse constante
• délai — attendre avant de commencer (0s par défaut)

La syntaxe @keyframes

On définit les étapes de l'animation :

@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }

Puis on l'applique :

.element { animation: fadeInUp 0.6s ease-out forwards; }

"forwards" signifie : rester dans l'état final après l'animation.

On peut aussi utiliser des pourcentages : 0% { }, 50% { }, 100% { } pour des animations plus complexes.

Performance — ce qui est rapide et ce qui est lent

Le navigateur peut animer certaines propriétés beaucoup plus rapidement que d'autres :

Rapide (accéléré par le GPU) — à privilégier TOUJOURS :

• transform : translate(), scale(), rotate()
• opacity

Lent (provoque un recalcul de la page entière) — à ÉVITER :

• width, height, margin, padding, top, left, right, bottom

Un recalcul (reflow) signifie que le navigateur recalcule la position de TOUS les éléments à chaque frame. À 60fps, ça fait 60 recalculs par seconde — l'animation saccade.

> Règle : au lieu d'animer top de 0 à -20px (lent), animez transform: translateY(0) vers translateY(-20px) (rapide). Même résultat visuel, performance incomparable.

Les pseudo-éléments ::before et ::after

Les pseudo-éléments créent des éléments virtuels pour les décorations CSS (traits, formes, overlays) sans ajouter de HTML. Ils nécessitent content: '' pour exister.

Exemple : un trait qui s'étend sous un lien au survol — c'est un ::after en position absolute dont on anime la largeur de 0 à 100%.

Accessibilité des animations

Certaines personnes sont sensibles aux mouvements. Respectez leur préférence système avec :

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }