Aller au contenu

Animation en CSS

Quelques ressources intéressantes à explorer

Utiliser les animations CSS

https://developer.mozilla.org/fr/docs/Web/CSS/Guides/Animations/Using

Règle CSS @keyframes

Les keyframes indiquent les étapes constituant une animation.

2 keyframes: from et to

Dans son expression la plus simple, il est possible de spécifier un état de départ from (0%) et un état de fin to (100%) :

@keyframes nom-animation {
  from { transform: translateX(0%) }
  to   { transform: translateX(400%) }
}

Une interpolation sera effectuée entre ces deux états.

Plusieurs keyframes %

Pour une animation plus élaborée, il est possible de spécifier plusieurs états représentant des pourcentages (%) de la durée totale de l'animation. Par exemple, 25% représente un quart de la durée totale de l'animation.

@keyframes nom-animation {
  0%,  100% { transform: translate(0%,    0%) }
  25%        { transform: translate(400%,  0%) }
  50%        { transform: translate(400%, 200%) }
  75%        { transform: translate(0%,   200%) }
}


See the Pen Animation-name / Keyframes by TIM Montmorency (@tim-momo) on CodePen.

À gauche, @keyframes utilisant un from et un to.
À droite, @keyframes utilisant des pourcentages (%).

📖 En savoir plus sur la règle CSS @keyframes via MDN

Propriétés d'animation CSS

animation (raccourcie) animation-composition animation-delay animation-direction animation-duration animation-fill-mode animation-iteration-count animation-name animation-play-state animation-timeline animation-timing-function

Événements

Toutes les animations, même celles d'une durée de 0 seconde, déclenchent des évènements d'animation.

  • animationstart
  • animationend
  • animationcancel
  • animationiteration

Propriétés d'animation CSS en détail

animation-name

Permet d'attribuer une animation à partir de son nom de référence en indiquant quel @keyframes appliquer à quel élément.

Par exemple, pour appliquer l'animation nommée anim à l'élément ayant la classe .element :

.element {
  animation-name: anim;
}

📖 En savoir plus sur la propriété animation-name via MDN

animation-duration

Définit la durée d'une animation. Ce nombre peut être en secondes ou en millisecondes. 1s = 1000ms.

Par exemple, trois fois la même animation animation-name: left-to-right, mais à des durées différentes :

  1. 1 seconde
  2. 2 secondes
  3. 3 secondes

See the Pen Animation-duration by TIM Montmorency (@tim-momo) on CodePen.

animation-timing-function

Dicte à l'animation son rythme. Par exemple, dans l'animation précédente on remarque que chaque carré accélère progressivement avant de ralentir ensuite. Ce rythme est appelé ease et est celui par défaut des animations.

L'exemple suivant contient six fois la même animation, mais avec des rythmes différents :

  1. linear — vitesse constante, n'accélère ou ne ralentit jamais ↗️
  2. ease — accélère progressivement et ralentit en fin de parcours (comportement par défaut)
  3. ease-in-out — commence lentement et ralentit en fin de parcours
  4. ease-in — commence lentement ⤴️
  5. ease-out — ralentit en fin de parcours ⤵️
  6. cubic-bezier — rythme personnalisable via une courbe de Bézier

See the Pen Animation-timing-function by TIM Montmorency (@tim-momo) on CodePen.


📖 En savoir plus sur la propriété animation-timing-function via MDN


🛠️ Outil — Cubic-Bezier.com
Outil développé par Lea Verou permettant de créer et de visualiser facilement des courbes de Bézier.

animation-iteration-count

Indique le nombre de fois qu'une animation doit être jouée (par défaut 1). Ce nombre peut être compris entre 0 et ∞ et accepte les fractions. Il est aussi possible de spécifier infinite pour qu'elle joue à l'infini.

Par exemple :

  1. Joue 1×
  2. Joue 2×
  3. Joue à l'infini ♾️

See the Pen Animation-iteration-count by TIM Montmorency (@tim-momo) on CodePen.


📖 En savoir plus sur la propriété animation-iteration-count via MDN


📝 Exercice — Animation - Fantôme
Pour cet exercice nous allons animer le déplacement d'un fantôme 👻.

`animation-delay

Définit le délai d'attente avant de démarrer une animation. Par défaut, cette propriété est à0s`. Si une valeur négative est attribuée, l'animation débutera déjà commencée, comme si l'équivalent de la valeur s'était déjà écoulée.

Par exemple :

  1. Aucun délai
  2. Délai de 0.5s
  3. Délai d'une seconde

Le délai n'est effectif qu'au tout début

Le délai n'est effectif qu'au démarrage d'une animation. Si celle-ci joue plus d'une fois, le délai ne sera pas effectif à chaque itération.


📖 En savoir plus sur la propriété animation-delay via MDN

animation-direction

Indique la direction dans laquelle une animation doit être jouée.

Valeurs possibles :

  • normal — du début vers la fin (par défaut)
  • reverse — de la fin vers le début
  • alternate — alterne entre normal et reverse à chaque itération
  • alternate-reverse — alterne entre reverse et normal à chaque itération

Par exemple :

  1. Normal
  2. Renversé
  3. Alterné

See the Pen Animation-direction by TIM Montmorency (@tim-momo) on CodePen.


📖 En savoir plus sur la propriété animation-direction via MDN


📝 Exercice — Animation - Pong
Pour cet exercice vous devrez animer en CSS la balle d'un des premiers jeux vidéo d'arcade au monde, c'est-à-dire Pong!

📝 Exercice — Animation - Yo-yo
Pour cet exercice nous allons animer l'un des plus vieux jeux au monde, le Yo-yo!

📝 Exercice — Animation - Pendule
Pour cet exercice nous allons animer un pendule.

animation-fill-mode

Indique l'apparence que doit prendre l'élément lorsque l'animation est terminée.

Valeurs possibles :

  • none — redevient tel qu'avant l'animation (par défaut)
  • forwards — garde l'apparence donnée par l'animation à la fin
  • backwards — garde l'apparence donnée par l'animation au début
  • both — combine l'apparence donnée par l'animation au début et à la fin

Par exemple :

  1. 1 en vert : animation-fill-mode : none
  2. 2 en bleu: animation-fill-mode : forwards

See the Pen Animation-fill-mode by TIM Montmorency (@tim-momo) on CodePen.


📖 En savoir plus sur la propriété animation-fill-mode via MDN


📝 Exercice — Animation - Billes
Pour cet exercice nous allons animer 5 billes blanches.

animation-play-state

Indique si une animation doit jouer ou être en pause.

Valeurs possibles :

  • running — l'animation joue
  • paused — l'animation est en pause

See the Pen Animation-play-state by TIM Montmorency (@tim-momo) on CodePen.


📖 En savoir plus sur la propriété animation-play-state via MDN


📝 Exercice — Animation - New Super Luigi
Pour cet exercice, vous devrez recréer une scène du château du niveau Frosted Glacier du jeu New Super Luigi sur la Wii U.

Animations activé par le *scroll", sans JavaScript!

NOUVEAU NOUVEAU NOUVEAU

animation-timeline

animation-timeline: scroll() et animation-timeline: view() : les animations pilotées par le scroll sont maintenant supportées dans tous les navigateurs majeurs (Safari 26 vient de les adopter en 2025, Chrome/Firefox depuis 2023).

C'est une révolution : zéro JavaScript pour des effets de parallaxe, d'apparition au scroll, etc.

animation-trigger

Propriété CSS très récent (support de Chrome 145, fin 2025), permet de déclencher une animation CSS à un offset de scroll précis, sans IntersectionObserver.

Démo résumé

See the Pen DEMO animation css au scoll timeline, trigger, stagger etc by TIM Montmorency (@tim-momo) on CodePen.

Différence entre transition et animation

TRANSITIONS CSS ANIMATIONS CSS
Ne peut passer que de l'état initial à l'état final — pas d'étapes intermédiaires Peut passer de l'état initial à l'état final, avec des étapes intermédiaires
Ne peut être exécutée qu'une seule fois Peut tourner en boucle à l'infini grâce à animation-iteration-count
Nécessite un déclencheur (comme le survol de la souris) Peut être déclenchée ou s'exécuter automatiquement
S'exécute en avant lorsque déclenchée, en arrière lorsque supprimée Peut s'exécuter en avant, en arrière ou dans des directions différentes
Plus facile à utiliser avec JavaScript Plus difficile à utiliser avec JavaScript
Meilleure pour créer un changement simple d'un état à un autre Idéale pour créer une série complexe de mouvements

Figure illustrant une simple transition vs une animation en 4 étapes.

Source : Hubspot