Faire tourner un logo en continu, faire clignoter un badge de notification, ou dérouler une bannière promotionnelle dès l'arrivée sur la page : ces animations qui démarrent seules, sans qu'un utilisateur ait besoin de survoler ou de cliquer sur quoi que ce soit, relèvent d'une Animation CSS construite avec la règle @keyframes.
Contrairement à une transition, qui se contente d'animer le passage entre deux états au gré des interactions, une Animation CSS chorégraphie une séquence complète d'étapes, avec la possibilité de la répéter indéfiniment, sans qu'aucun événement ne soit nécessaire pour la lancer.
Définition
Une Animation CSS repose sur deux éléments qui fonctionnent toujours ensemble : la règle @keyframes, qui définit les étapes de l'animation sous forme de pourcentages entre 0% et 100%, et la propriété animation, qui applique cette séquence à un élément avec sa durée, sa répétition et sa courbe d'accélération.
@keyframes apparition {
0% {
opacity: 0;
transform: translateY(10px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.notification {
animation: apparition 0.4s ease-out;
}Des étapes intermédiaires, pas seulement un début et une fin
Le vrai intérêt de @keyframes par rapport à une transition apparaît quand l'animation compte plus de deux étapes. On peut ajouter autant de pourcentages intermédiaires que nécessaire, chacun avec ses propres valeurs, pour construire une séquence bien plus riche qu'un simple passage d'un état à un autre.
@keyframes pulsation {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
}
.badge {
animation: pulsation 1.5s ease-in-out infinite;
}Les réglages du raccourci animation
Une fois @keyframes défini, la propriété animation permet de régler comment cette séquence doit se jouer, avec cinq réglages principaux qui se combinent librement selon l'effet recherché.
| Réglage | Rôle |
|---|---|
animation-name | Nom de la règle @keyframes à utiliser |
animation-duration | Durée d'un cycle complet |
animation-timing-function | Courbe d'accélération |
animation-iteration-count | Nombre de répétitions, ou infinite |
animation-direction | Sens de lecture, y compris en alternance |
La valeur alternate de animation-direction permet d'ailleurs de jouer une même séquence à l'endroit puis à l'envers à chaque répétition, ce qui évite d'avoir à écrire une étape de retour dans @keyframes pour un simple effet de va-et-vient.
transition ou Animation CSS : comment choisir
Une transition suffit dès qu'il s'agit d'animer un changement ponctuel déclenché par une interaction, comme un survol. Une Animation CSS devient nécessaire dès qu'il faut une séquence à plusieurs étapes, une boucle infinie, ou un déclenchement automatique au chargement de la page, sans attendre la moindre action de l'utilisateur. Notre formation HTML et CSS détaille ce choix entre les deux outils, avec des exercices pour construire aussi bien une transition qu'une animation en boucle.
forwards, sans quoi l'élément semble sauter en arrière une fois l'animation finie.Choisir la bonne courbe et limiter le coût
Le choix de la courbe d'accélération se règle avec une Easing et timing-function, et sur une animation en boucle, longue ou visible sur de nombreux éléments à la fois, will-change peut aider le navigateur à préparer le rendu, à condition de ne pas en abuser.
Questions fréquentes
Oui, en séparant les noms d'animation par une virgule dans la propriété animation, chacun avec sa propre durée et sa propre courbe, exactement comme pour plusieurs transitions combinées sur un même élément.
Oui, grâce à la propriété animation-play-state, réglable sur paused ou running, souvent pilotée en JavaScript pour arrêter une animation au survol de la souris ou reprendre une animation suspendue au chargement de la page.
0% et une étape à 100% ?Non, ce n'est pas obligatoire : une seule étape intermédiaire, par exemple à 50%, suffit techniquement, le navigateur complétant automatiquement les extrémités manquantes avec l'état initial et final réel de l'élément, mais préciser les deux bornes reste une habitude plus lisible et plus sûre.