Chargement...

Animations CSS

Les transitions ont appris A → B sur un déclencheur. Les transforms ont appris où va la boîte peinte. Les animations écrivent une chronologie : faire pulser un point de statut, faire tourner un loader sans fin, faire entrer des cartes en décalé — avec @keyframes pour les étapes et animation pour les lancer.

Ce qu’est une animation

Une animation a deux parties : un jeu de keyframes nommé (@keyframes) qui liste les styles à des pourcentages (ou from / to), et une règle qui joue ce nom avec une durée, un délai optionnel, un nombre d’itérations, une direction, une fonction de timing et un fill-mode. Le navigateur interpole entre les arrêts keyframe.

La correspondance des noms est stricte : animation-name: pulse ne tourne que si @keyframes pulse existe. Renommez l’un sans l’autre et rien ne bouge.

Les contrôles d’animation en bref

📊 Pièces essentielles de l’animation

Pièce Rôle
@keyframes name { … } Chronologie des valeurs de propriétés à % / from / to
animation-name Quel jeu de keyframes jouer
animation-duration Durée d’un cycle (s ou ms)
animation-timing-function Easing dans le cycle (ease, linear, …)
animation-delay Attente avant le premier cycle
animation-iteration-count Nombre de cycles (number ou infinite)
animation-direction normal, reverse, alternate, alternate-reverse
animation-fill-mode Styles avant/après (none, forwards, backwards, both)
animation shorthand name → duration → timing → delay → iteration → direction → fill-mode (ordre courant)

Vous n’avez rarement besoin de tous les longhands à la fois. Commencez par name + duration ; ajoutez infinite pour les loaders, alternate pour un rebond aller-retour, et forwards quand la dernière keyframe doit rester.

Première chronologie — un pulse calme

Opacity et transform restent paint-friendly. Un pulse doux est un classique pour le premier @keyframes.

Pulsation douce d’état avec @keyframes

css 
@keyframes pulse {
0%,
100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.55;
transform: scale(0.92);
}
}

.status-dot {
display: inline-block;
width: 0.75rem;
height: 0.75rem;
border-radius: 50%;
background: #16a34a;
animation: pulse 1.4s ease-in-out infinite;
}

0% et 100% correspondent pour que la boucle se raccorde proprement. infinite fait tourner le cycle — bien pour un petit indicateur de statut, bruyant si vous animez tout le hero de la page.

Rotation infinie — les loaders aiment linear

Une rotation avec linear et infinite se lit comme un spinner continu. Prévoyez un repli reduced-motion qui cache ou fige la rotation.

Anneau loader avec rotate infinite

css 
@keyframes spin {
to {
transform: rotate(360deg);
}
}

.loader {
width: 2rem;
height: 2rem;
border: 3px solid #e5e7eb;
border-top-color: #2563eb;
border-radius: 50%;
animation: spin 0.8s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
.loader {
animation: none;
border-top-color: #e5e7eb;
}
}

to est le raccourci de 100%. Partir du 0% par défaut (sans transform) suffit quand seule la fin du tour compte.

Délai et stagger — mêmes keyframes, départs différents

Un même jeu de keyframes peut animer plusieurs éléments. Décalez avec animation-delay pour qu’une liste paraisse séquentielle sans écrire trois animations différentes.

Fondu-montée décalé sur les items de liste

css 
@keyframes fade-up {
from {
opacity: 0;
transform: translateY(0.75rem);
}
to {
opacity: 1;
transform: translateY(0);
}
}

.reveal-list li {
opacity: 0;
animation: fade-up 0.45s ease forwards;
}

.reveal-list li:nth-child(1) { animation-delay: 0s; }
.reveal-list li:nth-child(2) { animation-delay: 0.08s; }
.reveal-list li:nth-child(3) { animation-delay: 0.16s; }

forwards garde les styles de la keyframe finale après la fin du cycle — sans ça, les items peuvent revenir d’un coup à opacity: 0 de la règle de base. C’est là que animation-fill-mode fait vraiment le travail.

Fill-mode sur une entrée unique

Les entrées en mouvement tournent souvent une seule fois. Le fill-mode décide si les styles s’appliquent avant le délai et après la dernière image.

Entrée de carte avec fill-mode both

css 
@keyframes card-in {
from {
opacity: 0;
transform: translateY(1rem) scale(0.98);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}

.card-enter {
animation: card-in 0.5s ease 0.1s both;
}

Raccourci ici : name card-in, duration 0.5s, easing ease, delay 0.1s, fill-mode both. both applique la première keyframe pendant le délai et retient la dernière ensuite.

Direction, play state, et quand ne pas animer

animation-direction: alternate fait tourner les cycles impairs en avant et les pairs en arrière — pratique pour un léger bounce sans dupliquer les keyframes. animation-play-state: paused fige une animation en cours (utile pour mettre en pause au survol sur des boucles décoratives).

Pour un simple changement de couleur au survol, gardez les transitions. Passez aux animations quand il faut des boucles, des histoires en plusieurs étapes, ou un mouvement qui ne dépend pas d’un seul basculement d’état. Privilégiez transform et opacity dans les keyframes ; animer width, height ou top coûte plus cher et fait souvent trembler le layout.

À essayer

  1. Construisez un pulse à trois arrêts (0% / 50% / 100%) sur l’opacity seule ; ajoutez ensuite un petit scale.
  2. Faites un spinner avec spin + linear + infinite ; passez à ease et notez l’effet irrégulier.
  3. Décalez trois badges avec les mêmes keyframes fade-up et des delays 0s, 0.1s, 0.2s — comparez avec et sans forwards.
  4. Utilisez le raccourci animation: card-in 0.5s ease 0.15s both sur un panneau ; retirez both et observez le snap-back.
  5. Sous prefers-reduced-motion: reduce, mettez animation: none (ou un court fade unique) sur les boucles décoratives.

Erreurs fréquentes

  • Attendre qu’un fade A→B au survol « boucle » — c’est le terrain de l’animation, pas d’une transition seule
  • Faute de frappe entre animation-name et le nom @keyframes — silence total, aucun mouvement
  • infinite sur de grandes zones très visibles sans pause ni chemin reduced-motion
  • Animer des propriétés de layout (width, margin, top) alors que transform/opacity suffiraient
  • Oublier forwards / both sur des révélations one-shot qui partent de opacity: 0 dans la règle de base

Résumé

  • @keyframes définissent la chronologie ; animation (ou longhands) la joue
  • Itération, direction, délai et fill-mode pour boucles, rebond, stagger et fins qui restent
  • Préférez transform/opacity ; respectez prefers-reduced-motion sur le mouvement décoratif
  • Transitions pour les changements d’état simples ; animations pour le multi-étapes et le répétitif
  • Suite dans Effects & Motion : CSS Filters

🧠 Testez Vos Connaissances

Prêt à Commencer

Testez Vos Connaissances

Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet

❓
7
Questions
🎯
70%
Pour Réussir
♾️
∞
Temps
🔄
∞
Tentatives

📝 Instructions

  • Lisez chaque question attentivement
  • Sélectionnez la meilleure réponse pour chaque question
  • Vous pouvez refaire le quiz autant de fois que vous le souhaitez
  • Votre progression sera affichée en haut
Sujet 61 de 63
Css Tutoriel