Maîtrise les animations CSS avec keyframes : séquences multi-étapes, propriétés de contrôle d'animation comme fill-mode, iteration-count, direction et play-state, et apprends à combiner plusieurs animations sur un seul élément.
La règle @keyframes définit les étapes d'une animation CSS. Tu donnes un nom à l'animation et tu spécifies des styles à différents points (keyframes) sur la timeline de l'animation.
Animation simple en deux étapes :
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}Animation multi-étapes utilisant des pourcentages :
@keyframes bounce {
0% { transform: translateY(0); }
50% { transform: translateY(-30px); }
100% { transform: translateY(0); }
}Tu peux définir autant de keyframes que nécessaire. Le navigateur interpole automatiquement entre eux.
Pour appliquer l'animation, utilise la notation raccourcie animation ou les propriétés individuelles :
.element {
animation: bounce 0.6s ease infinite;
}L'ordre de la notation raccourcie est : name duration timing-function delay iteration-count direction fill-mode play-state.
@keyframes slideIn {
0% { transform: translateX(-100%); opacity: 0; }
60% { transform: translateX(10%); opacity: 1; }
100% { transform: translateX(0); opacity: 1; }
}
.animated-box {
/* Name and duration (required) */
animation-name: slideIn;
animation-duration: 0.8s;
/* Timing function */
animation-timing-function: ease-out;
/* Delay before starting */
animation-delay: 0.2s;
/* How many times to repeat */
animation-iteration-count: 1; /* or: infinite, 3, etc. */
/* Direction of playback */
animation-direction: normal;
/* normal | reverse | alternate | alternate-reverse */
/* What styles apply before/after the animation */
animation-fill-mode: forwards;
/* none | forwards | backwards | both */
/* Pause or play */
animation-play-state: running; /* or: paused */
}animation-fill-mode contrôle ce qui se passe avant et après l'exécution de l'animation :
none — L'élément revient à son style original quand l'animation se termine.forwards — L'élément conserve les styles du dernier keyframe après la fin de l'animation.backwards — L'élément prend les styles du premier keyframe pendant la période de délai (avant le début de l'animation).both — Combine forwards et backwards.Tu peux appliquer plusieurs animations à un seul élément en les séparant par des virgules :
.element {
animation:
fadeIn 0.5s ease forwards,
slideUp 0.5s ease 0.2s forwards;
}Chaque animation peut avoir sa propre durée, délai et autres propriétés. Elles s'exécutent simultanément (sauf si les délais les décalent).
Astuce performance : Anime uniquement transform et opacity quand c'est possible. Ces propriétés peuvent être gérées par le compositeur GPU et ne déclenchent pas de recalculs de mise en page, ce qui produit des animations fluides à 60fps.
Que fait animation-fill-mode: forwards ?