Utiliser les animations CSS

Pour créer une animation CSS, il faut utiliser la propriété raccourcie animation ou les propriétés détaillées correspondantes sur un ou plusieurs éléments. Cette propriété permet de configurer la durée, le minutage et d'autres détails à propos de l'animation. Attention, cela ne détermine pas l'apparence visuelle de l'animation. Celle-ci est définie en utilisant des règles CSS de mise en forme au sein de la règle @ @keyframes comme décrit ci-après.

Les propriétés détaillées rattachées à la propriété raccourcie animation sont :

animation-delay

Cette propriété définit le délai entre le moment où l'élément est chargé et le moment où l'animation commence.

animation-direction

Cette propriété indique si l'animation doit alterner entre deux directions de progressions (faire des allers-retours) ou recommencer au début à chaque cycle de répétition.

animation-duration

Cette propriété définit la durée d'un cycle de l'animation.

animation-fill-mode

Cette propriété indique les valeurs qui doivent être appliquées aux propriétés avant et après l'exécution de l'animation.

animation-iteration-count

Cette propriété détermine le nombre de fois que l'animation est répétée. On peut utiliser le mot-clé infinite afin de répéter une animation infiniment.

animation-name

Cette propriété permet de déclarer un nom qui pourra être utilisé comme référence à l'animation pour la règle @ @keyframes.

animation-play-state

Cette propriété permet d'interrompre (« pause ») ou de reprendre l'exécution d'une animation.

animation-timing-function

Cette propriété configure la fonction de minutage d'une animation, autrement dit comment celle-ci accélère entre l'état initial et l'état final notamment grâce à des fonctions décrivant des courbes d'accélération.

Une fois qu'on a définit les propriétés propres à l'animation, on doit définir la mise en forme qui évolue lors de cette animation. Pour cela on définit deux étapes ou plus grâce à la règle @ @keyframes. Chaque étape décrit la façon dont l'élément animé doit être affiché à un instant donné lors de l'animation.

La durée de l'animation est définie avant et la règle @keyframes utilise donc des valeurs exprimées en pourcentages (type CSS <percentage>) pour indiquer l'instant correspondant à cet état. 0% indique l'état initial de l'animation et 100% indique l'état final. Ces deux états étant très important, il existe deux alias pour les décrire : from et to. Ces états sont optionnels et si from/0% ou to/100% ne sont pas définis, le navigateur utilisera les valeurs calculées des différentes propriétés.

Il est également possible d'ajouter des étapes intermédiaires, entre l'état initial et l'état final de l'animation.

Dans cet exemple simple, on met en forme l'élément <p> afin que le texte passe de la droite vers la gauche de l'écran

On notera que les animations comme celle-ci peuvent agrandir la page qui sera alors plus grande que la fenêtre du navigateur. Pour éviter ce problème, on pourra placer l'élément animé dans un conteneur et utiliser overflow:hidden sur ce conteneur.

p {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

Dans cet exemple, on indique dans les propriétés de <p> que l'animation doit durer trois secondes entre le début et la fin (c'est le rôle de animation-duration) et que le nom utilisé par la règle @ @keyframes pour faire référence à cette animation sera slidein.

Ici, on ne souhaite illustrer que les animations mais on aurait très bien pu avoir d'autres règles « classiques » pour d'autres propriétés à déclarer sur l'élément.

Les étapes (keyframes) de l'animation sont définies via la règle @ @keyframes. Dans ce premier exemple, on a uniquement deux étapes. La première décrit l'état à 0% (on utilise l'alias from). Pour cet état initial, on veut que la marge gauche de l'élément soit à 100% (c'est-à-dire tout à droite de l'élément englobant) et que la largeur de l'élément soit de 300% (soit trois fois la largeur de l'élément englobant). Cela permet que le contenu soit dessiné hors de la fenêtre lors de l'état initial.

La seconde, et dernière, étape, se produit à 100% d'avancement (dans l'exemple, on utilise l'alias to). Pour cet état, la marge gauche vaut 0% et la largeur de l'élément vaut 100%. De cette façon le contenu finit sa course contre le borde gauche de la zone de contenu.

<p>
  The Caterpillar and Alice looked at each other for some time in silence: at
  last the Caterpillar took the hookah out of its mouth, and addressed her in a
  languid, sleepy voice.
</p>

Ajoutons une autre étape à partir de l'animation précédente. Ici, nous allons agrandir la taille de police utilisée lorsque l'élément arrive de la droite avant qu'elle ne réduise à nouveau pour revenir à la taille originale une fois arrivée la fin de l'animation. Pour cela, on ajoute une étape dans la règle @ @keyframes :

75% {
  font-size: 300%;
  margin-left: 25%;
  width: 150%;
}

p {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  75% {
    font-size: 300%;
    margin-left: 25%;
    width: 150%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

<p>
  The Caterpillar and Alice looked at each other for some time in silence: at
  last the Caterpillar took the hookah out of its mouth, and addressed her in a
  languid, sleepy voice.
</p>

Cette nouvelle étape indique au navigateur que, lorsqu'on atteint 75% d'avancement, il faut que la marge à gauche soit de 25% et que la largeur du paragraphe représente 150% de la largeur de l'élément englobant.

Pour que l'animation se répète, il suffit d'utiliser la propriété animation-iteration-count et d'indiquer le nombre de répétitions souhaitées. Ici, on utilise la valeur infinite pour que l'animation se répète à l'infini :

p {
  animation-duration: 3s;
  animation-name: slidein;
  animation-iteration-count: infinite;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

<p>
  The Caterpillar and Alice looked at each other for some time in silence: at
  last the Caterpillar took the hookah out of its mouth, and addressed her in a
  languid, sleepy voice.
</p>

On a donc une animation qui se répète mais on obtient un résultat étrange, l'animation redémarre à chaque fois depuis l'état initial. Si on veut que le texte parcourt l'écran de droite à gauche puis de gauche à droite, on pourra utiliser la propriété animation-direction avec la valeur alternate :

p {
  animation-duration: 3s;
  animation-name: slidein;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

<p>
  The Caterpillar and Alice looked at each other for some time in silence: at
  last the Caterpillar took the hookah out of its mouth, and addressed her in a
  languid, sleepy voice.
</p>

La propriété raccourcie animation permet d'économiser de l'espace. Par exemple, si on prend cette règle :

p {
  animation-duration: 3s;
  animation-name: slidein;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

On peut la réécrire de façon plus concise :

p {
  animation: 3s infinite alternate slidein;
}

Les propriétés CSS détaillées permettent d'utiliser plusieurs valeurs, séparées par des virgules. Cela permet de paramétrer plusieurs animations via une seule règle. Prenons quelques exemples.

Dans ce premier exemple, on a trois animations nommées différemment mais qui utilisent la même durée et le même nombre d'itération :

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 3s;
animation-iteration-count: 1;

Dans ce deuxième exemple, les trois propriétés ont cette fois des composantes distinctes, pour la durée et le nombre d'itération. Ici, par exemple fadeInOut a une durée de 2.5s et 2 itérations.

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

Dans ce troisième cas, on a toujours trois animations mais uniquement deux durées et deux nombres d'itération. Lorsqu'il y a moins de valeurs que d'animations, on boucle sur les valeurs. Par exemple, avec le code qui suit, fadeInOut durera 2.5s, moveLeft300px durera 5s. On arrive à la fin de la liste des valeurs de durée et on reprend donc au début : bounce aura donc une durée de 2.5s. Le nombre d'itérations sera affecté de la même façon.

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s;
animation-iteration-count: 2, 1;

Il est possible d'obtenir des informations et un certain contrôle sur les animations en utilisant l'objet AnimationEvent. Celui-ci peut être utilisé pour détecter quand les animations commencent, finissent et il peut déclencher une nouvelle itération. Chaque événement inclue l'instant auquel il s'est produit et le nom de l'animation qui a déclenché l'événement.

Dans la suite de cet article, nous allons modifier l'exemple précédent pour obtenir des informations supplémentaires sur chaque événement d'animation lorsqu'il se produit afin de mieux voir comment cela fonctionne.

La feuille de style CSS

On commence par rédiger le CSS pour l'animation. Ici, l'animation durera 3 secondes, sera intitulée slidein, se répètera trois fois et changera de direction pour faire des allers-retours. Dans la règle @ @keyframes, on manipule la largeur et la marge à gauche de l'élément afin que ce dernier traverse l'écran.

.slidein {
  animation-duration: 3s;
  animation-name: slidein;
  animation-iteration-count: 3;
  animation-direction: alternate;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

Les gestionnaires d'événements

On utilisera JavaScript pour « écouter » les trois événements possibles. Le code qui suit permet de définir les gestionnaires d'événement (à utiliser une fois que le document a été chargé).

var element = document.getElementById("watchme");
element.addEventListener("animationstart", listener, false);
element.addEventListener("animationend", listener, false);
element.addEventListener("animationiteration", listener, false);

element.className = "slidein";

Ce code est plutôt classique, n'hésitez pas à consulter la documentation de eventTarget.addEventListener() si besoin. Pour finir, ce script attribut une classe sur slidein sur l'élément.

Quel est l'intérêt ? En fait, l'événement animationstart est déclenché dès que l'animation démarre et cela se produit alors avant l'exécution du script. Pour éviter cela, on démarre l'animation via le script en définissant la classe de l'élément à animer.

Écouter les événements

Les événements sont transmis à la fonction listener() décrite ici :

function listener(event) {
  var l = document.createElement("li");
  switch (event.type) {
    case "animationstart":
      l.innerHTML = "Début : durée écoulée : " + event.elapsedTime;
      break;
    case "animationend":
      l.innerHTML = "Fin : durée écoulée : " + event.elapsedTime;
      break;
    case "animationiteration":
      l.innerHTML = "Nouvelle boucle démarrée à : " + event.elapsedTime;
      break;
  }
  document.getElementById("output").appendChild(l);
}

Ce code consulte event.type afin de déterminer l'événement qui s'est produit puis ajoute un élément <ul> au document pour alimenter un journal des événements.

Le résultat obtenu devrait ressembler à quelque chose comme :

• Début : durée écoulée : 0
• Nouvelle boucle démarrée à : 3.01200008392334
• Nouvelle boucle démarrée à : 6.00600004196167
• Fin : durée écoulée : 9.234000205993652

On voit ici que les durées sont proches mais pas exactes. On voit également que, lors de la fin de l'animation, l'événement animationiteration n'est pas envoyé, seul animationend est déclenché.

Le document HTML

Afin d'être tout à fait complet, voici le code HTML qui peut être utilisé et qui contint la liste dans laquelle on enregistrera les événements reçus :

<h1 id="watchme">Regardez-moi bouger</h1>
<p>
  Un exemple d'animation CSS pour déplacer
  un élément <code>H1</code> sur une page.
</p>
<p>
  Voici les événements relatifs aux animations :
</p>
<ul id="output">
</ul>
</body>

• AnimationEvent
• Détecter la prise en charge des animations CSS
• Manipuler les transitions CSS
• CSS