Les animations permettent de créer des effets complexes et dynamiques afin d'améliorer l'expérience interactive de l'utilisateur. Les animations ne nécessitent pas d'événement déclencheur spécifique et peuvent être configurées pour se répéter indéfiniment. De plus, les animations peuvent comporter plusieurs états intermédiaires entre l'état initial et l'état final, offrant ainsi une plus grande flexibilité et un meilleur contrôle sur les effets visuels produits.

Création d'une animation

Les animations peuvent être créées à l'aide de la règle @keyframes, qui définit un ensemble de styles CSS à différents moments d'une animation. Il est également nécessaire d'attribuer un nom à l'animation. Ce nom doit être descriptif, c'est-à-dire indiquer le type d'animation.

@keyframes AnimationName {
 /* Styles at various points (at least initial and final) */ 
}

Pour déterminer la modification des propriétés à un moment précis, il est possible d'utiliser les mots-clés : from (0%) et to (100%). Le plus souvent, les valeurs en pourcentage sont utilisées.

@keyframes AnimationName {
  0% {
    /* Properties to be changed */
  }

  10% {
    /* Properties to be changed */
  }

  30% {
    /* Properties to be changed */
  }

  /* As many as we need */
  
  100% {
    /* Properties to be changed */
  }
}

Une fois l'animation déclarée, il est possible d'utiliser le nom des keyframes comme valeur de la propriété animation-name sur différents éléments. Un autre avantage des animations est qu'elles peuvent être appliquées de manière répétée à plusieurs éléments.

selector {
  animation-name: AnimationName;
}

Pratique

Ajout d'une animation à l’élément div. L’objectif est de modifier la propriété background-color au fil du temps. L’état initial sera green, puis à 60% il faudra passer à red, et à l’état final, utiliser blue. De plus, la propriété animation-duration sera spécifiée afin de visualiser l’animation en fonctionnement.