À quoi servent les keyframes et comment fonctionnent-ils?

@keyframes — règle CSS qui définit les images clés d'une animation. Elle permet de créer une séquence d'états d'un élément à différents moments, que le navigateur interpolera en douceur, créant un effet de mouvement. Fonctionne en définissant un ensemble de styles pour l'élément à certains pourcentages de temps (de 0% à 100%) ou en utilisant les mots-clés from (0%) et to (100%).

Pour utiliser keyframes :

1. Définir la règle @keyframes avec un nom unique.
2. À l'intérieur de @keyframes, spécifier des styles pour différents points dans le temps (en pourcentages ou from/to).
3. Appliquer l'animation créée à l'élément avec la propriété CSS animation.

@keyframes slidein {
  from {
    transform: translateX(0%); // État initial : pas de déplacement en X
  }

  to {
    transform: translateX(100%); // État final : déplacement à 100% en X
  }
}

.element {
  animation-name: slidein; // Nom de l'animation défini ci-dessus
  animation-duration: 3s; // Durée de l'animation
  animation-timing-function: ease-in-out; // Fonction de vitesse de l'animation
  animation-delay: 1s; // Délai avant le début de l'animation
  animation-iteration-count: infinite; // Nombre de répétitions (ici infini)
  animation-direction: alternate; // Direction de l'animation (normal, puis inverse)
}

Propriétés principales de animation, utilisées avec @keyframes :

Propriété	Description
animation-name	Nom de @keyframes à appliquer.
animation-duration	Durée d'un cycle d'animation (par exemple, 2s, 500ms).
animation-timing-function	Fonction de vitesse de l'animation (par exemple, linear, ease, ease-in, cubic-bezier).
animation-delay	Délai avant le début de l'animation (par exemple, 1s).
animation-iteration-count	Nombre de répétitions de l'animation (infinite pour répétition infinie).
animation-direction	Direction de l'animation (normal, reverse, alternate, alternate-reverse).
animation-fill-mode	Détermine quels styles sont appliqués à l'élément avant et après l'animation.
animation-play-state	Détermine si l'animation est en cours ou en pause.