Créer des animations CSS modernes

Ce MON a pour but de se famliariser avec les animations CSS qui sont essentiels pour dynamiser un site web et attirer l'attention d'un visiteur.

Introduction

Dans le but de m'méliorer dans le développement web je voulais m'intéresser à l'utilisation des animations sur les sites web pour les rendre plus dynamiques et attractifs pour l'utilisateur. Pour ce MON j'ai suivi le cours d'OpenClassroom Créer des animaton CSS modernes d'une durée estimée à 15h.

Créer des animations avec des transitions

Il existe deux moyens de créer des animations en CSS :

• les transitions
• les keyframes

Les keyframes sont plus complexes à mettre en place mais elles permettent d'obtenir des animations plus élaborées. Les transitions sont elles plus limités mais plus simples à créer.

Pour créer une transition il faut différentes informations :

• une propriété CSS à modifier
• une valeur initiale pour votre propriété CSS
• une valeur finale pour cette même propriété
• une durée
• un événement pour déclencher votre transition

On applique la valeur initiale à l’élément qu’on veut modifier, et la valeur finale dans la pseudoclasse qui déclenche la transition. La durée de la transition peut s'exprimer en secondes ou en millisecondes. On peut déclarer les propriétés d'une transistion individuellement ou en les combinant.

transition: transform ;
transition-duration: 400ms ; 

transition: transform 400ms ; 

Pseudos-classes pour déclencher une transition

Les pseudoclasses sont essentielles pour déclencher des transitions en CSS, les plus adaptées sont celles qui impliquent une interaction avec l'utilisateur. On peut aussi combiner des pseudoclasses entre elles pour créer des sélecteurs un peu plus précis, et permette aussi de changer le style d'un élément voisin.

• :hover, qui est déclenché au survol de la souris.

• :active, activé au clic de l'utilisateur (le plus souvent pour les liens et boutons).

• :focus, qui se déclenche lorsque son élément reçoit le focus (soit il est sélectionné à l'aide du clavier, soit il est activé avec la souris).

• :valid, dont la validation du contenu s'effectue correctement par rapport au type de donnée attendu.

• :invalid, qui inversement, correspond à un élément dont la validation du contenu ne s'effectue pas correctement par rapport au type de donnée attendu.

• :not(), qui correspond à la négation. Elle prend un sélecteur en argument et permet de cibler les éléments qui ne sont pas représentés par cet argument.

• :checked, qui correspond aux input de type checkbox, option ou radio qui sont cochés.

• :enabled, un élément avec lequel on peut interagir.

• :disabled, qui correspond à un élément dont l'interaction a été bloquée.

Appliquez les 12 principes de l'animation web

Maintenant, il est opportun de réfléchir à la manière de créer des animations plus naturelles et engageantes. Bien que les animations déjà élaborées soient fonctionnelles, elles se limitent aux propriétés de transition de base, en laissant de côté la plupart des valeurs par défaut. Ces dernières produisent des effets excessivement lisses, parfois artificiels, en contraste avec la nature, où les mouvements sont caractérisés par l'irrégularité, les oscillations et les changements de direction. L'objectif d'intégrer des animations sur un site web est de procurer une expérience immersive en infusant une dynamique organique dans les mouvements, harmonisant ainsi l'expérience utilisateur avec notre perception naturelle.

Créer des transitions css à propriétés multiples

Pour créer des animations vivantes et agréables il faut faire plus que simplement passer d'un état A à un état B. En superposant des effets de mouvement on offre à l'utilisateur une animation qui parait beaucoup plus authentique. Ainsi, au sein d'une transition, on peut facilement animer deux propriétés, ou même autant que l'on désire.

L’utilisation du mot-clé all permet de déclencher plusieurs changements au même moment et pour la même durée, mais il existe un autre moyen d’ajouter des propriétés multiples à une transition. On peut aussi faire une liste des animations de chaque propriété à laquelle nous voulons ajouter une transition, séparées par des virgules.

transition: transform 450ms, background-color 450ms ; 

On peut donner une durée différente pour chaque changements. C’est très utile pour obtenir un rendu moins uniforme, et ainsi créer quelque chose de plus intéressant visuellement et de plus engageant pour l’utilisateur.

transition: transform 450ms, background-color 300ms ; 

La différence ne se voit qu'à peine, mais ces quelques fractions de secondes permettent de rendre l’animation un peu moins parfaite et lui apportent un peu de texture.

Pour accentuer encore plus le côté "imparfait" de l'animation on peut retarder le changement sur une des propriétés. Par exemple faire démarer la transition sur background-color 150ms plus tard pour que les deux transistions se terminrent en même temps.

transition: transform 450ms, background-color 300ms;
transition-delay: 0, 150ms;

Créer des animations plus naturelles avec les fonctions de timing

Pour que les animations soient encore plus réaliste il faut penser que dans la nature un objet en mouvement doit accèléré à un moment donner et déccelérer lorsque son mouvement prend fin. On parle de ease-in et ease-out.

En CSS on utilise la propriété transition-timing-function pour régler la courbe d’accélération d’une transition.

Principales fonctions de timing

• la fonction linear : elle ne connaît pas d'accentuation à l'accélération ou à la décélération. Sa courbe est totalement droite du point A au point B.

transition: transform 1000ms;
transition-timing-function: linear;

• les fonctions ease-in-out, ease-in,ease-out : elles suivent une courbe d’accélération (pour ease-in et ease-in-out) et de décélération (pour ease-out et ease-in-out) subtile.

transition: transform 1000ms ease-in-out;

• la fonction ease : c'est la fonction qui est utilisée par défaut lorsqu'aucune fonction n'est précisée. Elle ressemble beaucoup aux fonctions ci-dessus mais avec une accélération plus nette et une rampe de décélération plus prononcée.

Ces fonctions sont des raccourcis de la fonction cubic-bezier : on lui indique une liste de valeurs numériques, qu'elle transforme en courbe d’accélération. Par exemple, ease-in-out peut être écrite ainsi :

transition-timing-function: cubic-bezier(.42, 0, .58, 1);

Avec des outils comme le site Cubic Bezier on peut créer facilement la courbe de bézier qui correspond à l'accélèration et la déccélération que l'on désire et récupérer les valeur numérique correspondante.

Optimisez les performances de votre navigateur pour vos animations CSS

À l'écran, il n'y a pas de réel déplacement, mais plutôt une séquence d'images se succédant suffisamment rapidement pour être interprétée par notre cerveau comme un mouvement. Cette séquence d'images est appelée les FPS (Images par seconde).

Un FPS plus élevé garantit une animation plus fluide, et l'idéal est généralement de viser 60 FPS. Les étapes de création d'une page web comprennent le style (où le navigateur interprète la structure HTML pour préparer le style), la mise en page (où le navigateur détermine la disposition et la taille des éléments en fonction du style), la peinture (où les éléments sont transformés en pixels), et enfin la composition (où tous les éléments sont combinés pour afficher la page).

Pour assurer la fluidité des animations, il est recommandé de se limiter à animer des propriétés lors de l'étape de composition. Les plus utiles à cet effet sont les propriétés "transform" et "opacity".

Créez des animations fluides avec la propriété CSS transform

Pour nous assurer que nos animations soient aussi fluides que possibles, nos deux propriétés alliées sont transform et opacity. Cela peut paraitre limité mais en fait ces deux propriétés ont une multitude de fonctions à elles seules.

La propriété "transform" offre une flexibilité exceptionnelle pour manipuler et animer les sites de manière variée. Étant donné que toutes ces manipulations se produisent pendant l'étape de composition, les animations sont fluides sur tous les supports.

Il est possible de déplacer des éléments grâce aux fonctions de translation telles que "translate()", "translateX()", "translateY()", et "translate3d()". De même, on peut ajuster la taille avec les fonctions de mise à l'échelle telles que "scale()", "scaleX()", "scaleY()", et "scale3d()". En outre, il est possible de réaliser des rotations en utilisant les fonctions "rotate()", "rotateX()", "rotateY()", et "rotateZ()".

Il est important de noter qu'ajouter une deuxième propriété "transform" annule la première, ce qui signifie qu'un seul "transform" peut être défini dans un même sélecteur. Pour effectuer plusieurs transformations, il suffit de les lister dans une seule propriété "transform", comme suit :

transform:translateX(200%) scale(2)

L'ordre y est important car une propriété contenant plusieurs fonctions exécute ces fonctions dans l'ordre, de droite à gauche.

Pour les fonctions de transformations en 3D telles que "translate3d()", "rotateZ()", et "scale3d()", il est également nécessaire d'inclure la fonction "perspective". Cela permet d'indiquer au navigateur la distance à laquelle se trouve l'utilisateur : plus la distance est grande, moins l'animation sera perceptible.

Modifier le point d'ancrage d'un élément grâce à transform-origin

La propriété "transform-origin" permet de déplacer le point d'ancrage, qui est initialement positionné au centre de l'élément.

On peut ajuster ce point d'origine en utilisant des unités telles que px, rem, vh, etc. Il est également possible d'utiliser des pourcentages pour les axes X et Y. Alternativement, des mots clés tels que "left" et "right" pour l'axe X, "top" et "bottom" pour l'axe Y, ainsi que "center" pour les deux axes peuvent être employés.

Il est possible de ne pas spécifier la valeur de l'axe Y, ou lors de l'utilisation de mots clés, de fournir uniquement une valeur. Dans ce cas, le navigateur comprend automatiquement à quel axe la valeur s'applique.

Lorsque le point d'origine est modifié en 3D, la valeur de Z doit être exprimée en unités (et non en pourcentages).

Analyser la performance de vos animations avec Chrome DevTools

Chrome DevTools demeure l'outil privilégié des développeurs, offrant la possibilité d'inspecter le code source d'une page, d'évaluer les performances de la page, et même de restreindre délibérément les performances de la machine pour simuler un appareil plus lent, grâce à l'activation de l'option "CPU throttling".

L'outil Performance, quant à lui, permet une analyse approfondie des performances d'une page, incluant le taux d'images par seconde d'une animation. En utilisant l'onglet Performance, il devient possible d'examiner en détail nos animations, facilitant ainsi la détection des problèmes potentiels dans notre code qui pourraient affecter la fluidité sur différents supports.

Par ailleurs, en zoomant sur une image spécifique d'une animation, il est envisageable de scruter en détail les calculs effectués par le navigateur, offrant une vision plus précise des processus évoqués dans le chapitre dédié au fonctionnement du navigateur.

Animer les couleurs de manière performante avec opacity

Animer la couleur d'une propriété entraîne des calculs de peinture, mais la propriété "opacity" offre une alternative en permettant des transitions entre les couleurs tout en contournant ces calculs. Pour définir le niveau de transparence, la propriété "opacity" prend une valeur entre 0 et 1, où 0 représente une transparence totale et 1 une opacité totale.

Afin d'éviter d'ajouter des balises

.selector::after{...}

@keyframes example-frames {...};

33% {...};