Blog / L’animation en CSS

L’animation en CSS

Aujourd’hui, le motion-design est très à la mode. Rajouter de l’animation en css dans un site apporte une certaine dynamique intéressante. Attention à ne pas en abuser bien sûr ! Sinon, c’est la nausée !

Alors regardons un peu ça, revenons aux origines:

« Animer »

Ethymologie :
Du latin animare (« donner de la vie »), de anima (« souffle, vie »).

Définition : Donner à quelque chose la vie ou l’apparence de la vie

Dans un film d’animation, l’animateur va donc donner vie au personnage. Allons voir dans le passé comment sont apparues ces concepts d’animation.

Un peu d’histoire

On peut faire remonter les ancêtres du cinéma d’animation aux lanternes magiques du 17ème siècle : des images peintes sur des plaques de verre mises en rotation et qui donne une impression de mouvement.

Le 25 octobre 1892, Emile Reynaud invente le praxinoscope: de ravissants dessins tracés sur de longues bandes de papier qui sont projetés sur un écran par réflexion dans un miroir.

L’impression de mouvement est due à la persistance rétinienne. L’image reste gravée au fond de notre œil (sur la rétine) pendant une fraction de seconde, puis la suivante vient s’imprimer. Les deux images alternent très vite, l’œil fait le lien entre elles pour ne plus en faire qu’une. C’est ce qui crée cette impression de mouvement.

Les différents types d’animations

– L’animation 3D (3DSMax, Softimage, Maya,…)

-L’animation 2D (traditionnelle dessinée ou numérique)

L’animation images par images (pâte à modeler, objets 2D ou 3D,…)

Principes de base en animation « Keyframe »

Pour pouvoir animer un élément, il faut :

– un repère orthonormé x,y (et z si c’est en 3d)

– une timeline (barre de temps)

On détermine une position p1 à un temps t1. On détermine une autre position p2 à un temps t2
Ce sont les Keyframes, les clés d’animations, les poses-clés.
Ensuite, l’ordinateur ou l’animateur va interpoler les deux positions et créer le mouvement.

Pour donner l’illusion de l’animation, il faut faire sentir le poids et l’élasticité de l’objet

Courbes de rebonds de différentes balles

Les animations CSS

Les animations CSS permettent de créer des transitions entre deux états de mise en forme. Une animation est décrite par deux choses :

– des propriétés propres à l’animation

– un ensemble d’étapes (keyframes) qui indiquent l’état initial, final et éventuellement des états intermédiaires.

Trois avantages permettent de distinguer les animations CSS des techniques d’animations utilisant JavaScript :

1 – On peut aisément obtenir des animations simples sans avoir à connaître JavaScript.

2 – Les animations s’exécuteront correctement même lorsque le système est soumis à une charge modérée.
Il est possible que des animations JavaScript s’exécutent lentement si elles sont mal décrites. Dans le cadre des animations CSS, le moteur de rendu peut utiliser certaines techniques (comme le frame-skipping) afin que le résultat obtenu soit aussi fluide que possible.

3 – En laissant le contrôle de l’animation au navigateur, celui-ci peut optimiser les performances et l’efficacité du système, par exemple en réduisant la fréquence de mise à jour des animations qui sont exécutées dans des onglets qui ne sont pas visibles à l’écran.

Paramétrer l’animation

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.

L’apparence visuelle de l’animation est définie en utilisant des règles CSS de mise en forme au sein de la règle [@keyframes]

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.

Définir les étapes composant une animation (@keyframes)

Une fois qu’on a défini 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 les étapes 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 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.

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