Animations en CSS

Qu'est-ce qu'une animation CSS ?

Une animation CSS permet à un élément HTML de passer progressivement d'un style à un autre, sans avoir recours à JavaScript. Vous pouvez modifier un nombre illimité de propriétés CSS plusieurs fois.

Les clés de l'animation : les keyframes

Pour créer une animation en CSS, il est essentiel de définir des keyframes. Ces keyframes déterminent quelles seront les propriétés CSS de l'élément à différents moments de l'animation. En précisant les styles dans la règle @keyframes, l'animation se fera progressivement, du style actuel vers le nouveau.

Exemple d'animation

Voici un exemple d'animation où un élément <h1> apparaît dans une couleur violette et change progressivement en jaune sur une durée de 5 secondes :

/* L'animation */
@keyframes changement-couleur {
  from {
    color: violet;
  }
  25% {
    color: orange;
  }
  50% {
    color: rouge;
  }
  75% {
    color: bleu;
  }
  to {
    color: jaune;
  }
}

/* L'élément */
h1 {
  color: violet;
  animation-name: changement-couleur;
  animation-duration: 5s;
}

Propriétés des animations CSS

Les animations CSS sont contrôlées par plusieurs propriétés : - @keyframes : Gère une animation avec plusieurs étapes intermédiaires, définissant les valeurs des propriétés à chaque keyframe. - animation : Propriété abrégée pour définir les animations d'un élément. - animation-delay : Indique quand commence une animation. - animation-direction : Indique si une animation se déroule dans le sens normal ou inverse sur tout ou partie de ses cycles. - animation-duration : Définit la durée nécessaire à l'achèvement d'une animation. - animation-fill-mode : Indique quelles valeurs sont appliquées par une animation en dehors de son temps d'exécution. - animation-iteration-count : Définit combien de fois une animation doit s'exécuter. - animation-name : Définit une liste d'animations à appliquer au sélecteur donné. - animation-play-state : Indique si une animation est en cours ou en pause. - animation-timing-function : Modèle la courbe de vitesse de l'animation.