Créez des animations CSS modernes

Assurez-vous d’avoir des animations fluides

Comme je vous le disais dans la vidéo d'introduction, les animations que nous voyons sur nos écrans ne sont pas de véritables mouvements. Il s'agit en fait de successions d'images allant suffisamment vite pour qu'elles soient interprétées par notre cerveau comme des objets en mouvement.

Je vous parlais également de Frames Per Second (FPS). Voyons ce que cela donne sur nos écrans 🤓

Dans l’animation suivante, une balle qui va et vient au rythme de 50 images par secondes (ou 50 FPS) :

Le mouvement paraît bien fluide. Maintenant, voici la même animation, mais avec 10 FPS au lieu de 50 :

Le mouvement de la balle paraît vraiment moins fluide à 10 FPS qu’à 50. On peut même distinguer les images qui composent l’animation. Au lieu de paraître naturelle, l’animation ressemble plutôt à une tentative d’imitation de mouvement. L’image saccadée ne trompe pas notre cerveau. Au contraire, l'expérience est plutôt désagréable, ce qui nous distrait de l’animation.

En animation traditionnelle, le nombre d’images par seconde est fixe et toutes les images sont créées avant que l’animation ne soit lancée. Mais les animations CSS sont affichées en temps réel par le navigateur, qui met à jour l’animation avec les nouvelles images dès qu’il les a calculées.

Cela signifie que le nombre d’images par seconde de nos animations est variable. Par exemple, disons que le navigateur met 0,04 seconde à calculer une image d’une animation, puis 0,03 seconde à calculer la suivante.

Mais cela ne nous donne pas le FPS pour autant.

Pour déterminer le nombre d’images par seconde, on divise une seconde par la durée de calcul, en secondes. Donc 1/0,04 = 25 FPS.

Ce qui veut dire que le nombre d’images par seconde de l’animation est de 25 FPS pour la première image, et 30 pour la deuxième.

La question n’est pas tant comment calculer le nombre d’images par seconde de notre animation, mais comment s'assurer de respecter le nombre idéal, à savoir 60 FPS.

La plupart des écrans ont un taux de rafraîchissement de 60 hz, ou 60 images par seconde. Si on crée une animation avec 75 FPS, le spectateur n’en verrait que 60 parce que l’écran ne rafraîchit par l’image assez vite pour afficher les 75. 60 FPS est donc le taux d’images par seconde le plus fluide que le spectateur pourra voir sur ses écrans.

De fait, nous devons nous assurer que le navigateur mette moins d'un soixantième de seconde, ou 0,016 seconde (16 millisecondes) pour calculer les images de notre animation.

Pour cela, il suffit de suivre certaines bonnes pratiques dans la manière d'écrire vos animations CSS.

Comprenez comment le navigateur passe des codes HTML et CSS à une page web

Pour passer des codes CSS et HTML… à une page web, le navigateur passe par plusieurs étapes pour afficher une page. Voici les étapes qui nous intéressent pour le rendu de nos animations :

1- Style : le navigateur reçoit le code HTML. Il va l'interpréter pour comprendre la structure du DOM (Document Object Model). Ainsi, pour chaque balise HTML, il crée un élément du DOM, un peu comme un arbre de nœuds. Il parcourt ensuite le CSS, et détermine quelles règles s’appliquent à quels éléments. À partir de là, il va créer la structure qui s'affichera.

2- Layout (mise en page) : maintenant que le navigateur connaît les styles et les éléments à afficher, il détermine la taille des éléments et où les placer. 

3- Paint (peinture) : le navigateur transforme les éléments en pixels en utilisant les styles de l’étape 1, et les positions et dimensions déduites de l’étape 2.

4- Composition : le navigateur combine tous les éléments pour composer la page qui s’affiche dans le navigateur.

Ces différentes étapes sont importantes pour comprendre quelles propriétés modifier pour nos animations. En effet, le navigateur applique différentes propriétés CSS à différentes étapes du processus. Typiquement, width et height sont appliquées pendant l'étape du layout. En revanche, color et box-shadow sont appliquées à l'étape paint.

Chaque étape nécessite un temps de calcul au navigateur. Il est donc plus judicieux de passer par le moins d'étapes possible si on veut respecter le seuil des 16 millisecondes pour chaque étape de notre animation.

Reprenons l'exemple de notre bouton dans la partie précédente.

Mon bouton fait 30 px par 100 px. Au survol de la souris, je veux qu'il s'élargisse de 10 px. Si je change la propriété  width  , cela veut dire que mon navigateur recalcule le layout, le paint et la composition. Pas très optimal, n'est-ce pas ? 🙈

Et à chaque mouvement de souris, il faudra tout recalculer. Or, plus le navigateur doit faire de calculs, plus il mettra de temps, ce qui baisse le nombre d’images par seconde, et dégrade considérablement l'expérience utilisateur.

Quand le nombre d’images par seconde devient tellement faible qu’on commence à distinguer les images une par une et que le mouvement semble "rouiller", on appelle ça “jank”. C'est le pire ennemi d’un animateur. La clé pour éviter le jank est de se limiter à animer des propriétés qui ne déclenchent pas de calculs de layout ou de paint.

En d’autres termes, il ne faut animer que des propriétés qui font partie de l’étape composition. Les plus adaptées sont donc  transform  et  opacity  .

Revenons à notre bouton qui faisait grossir une boule en utilisant la fonction  scale()  de la propriété  transform  :

Les changements de dimension de la boule n’affectent pas la position du bouton. En effet, la propriété transform effectue ses opérations à l’étape composition, ce qui ne cause aucun changement de layout (mise en page) ou de paint, donc moins de calcul pour le navigateur, et donc un meilleur FPS.

Génial, n’est-ce pas ?

En résumé

• à l'écran, il n'y a pas de véritable mouvement, mais une succession d'images s'enchaînant suffisamment rapidement pour être interprétées par notre cerveau comme du mouvement ;

• cette succession d'images s'appelle les FPS (Frame Per Second, ce qui signifie images par seconde) ;

• plus le FPS est élevé, plus l'animation est fluide ;

• le taux d’images par seconde idéal est 60 FPS ;

• les quatre étapes de la création d’une page web sont : 

  • Style : le navigateur comprend la structure HTML du code qu'il reçoit et prépare le style qui sera appliqué,

  • Layout (mise en page) : le navigateur détermine la mise en page et la taille des éléments en fonction du style qu'il a reçu,

  • Paint : il transforme les éléments en pixels,

  • Composition : il combine tous les éléments pour composer la page qui s’affiche ;

• pour assurer la fluidité des animations, il faut se contenter d’animer des propriétés de l’étape composition. Les plus utiles sont  transform  et  opacity  .

Maintenant que vous comprenez tous les enjeux liés au choix des propriétés de ces animations, nous allons pouvoir explorer la propriété transform. Nous verrons les nombreuses fonctions qu’elle met à notre disposition pour créer des animations fluides.