Les modules d’animation

Les modules CSS

Avec l’avènement des CSS3, le W3C a introduit des modules dédiés à l’animation d’éléments dans les pages web. Avant cela, les pages web contenaient souvent des animations créées avec des technologies souvent propriétaires comme Adobe Animate et qui nécessitaient des plugins.

Avec ces modules, vous allez pouvoir créer des animations simples et efficaces qui seront reconnues par tous les navigateurs modernes. Le W3C nous propose trois modules :

Transforms Module Level 1 qui est en Candidate Recommendation, au 14 février 2019 : https://www.w3.org/TR/css-transforms-1/
CSS Transitions qui est en Working Draft, au 11 octobre 2018 : https://www.w3.org/TR/css-transitions-1/
Web Animations qui est aussi en Working Draft, au 5 juin 2023 : https://www.w3.org/TR/web-animations-1/

Dans ce chapitre, nous n’allons pas étudier toutes les fonctionnalités de ces modules, mais nous allons aborder les principes fonctionnels, afin que vous puissiez comprendre le code que vous pourrez rencontrer.

Les transformations

1. La fonction et le point de référence

Pour créer une transformation, utilisez la propriété transform. Cette propriété utilise ensuite des fonctions pour appliquer telle ou telle transformation.

Par défaut, toutes les transformations ont comme point de référence le centre de l’élément. Ce point de référence est utilisé pour les calculs des transformations.

Utilisez la propriété transform-origin si vous souhaitez changer de référence. La valeur spécifiée indique alors le nouveau point de référence. Les valeurs acceptées sont :

des pourcentages. La valeur par défaut est 50% 50%, soit au milieu de l’élément ;
des mots-clés : left, center, right, top, center et bottom ;
des valeurs exprimées en pixels.

Voici un premier exemple très simple d’une rotation avec le point de référence par défaut qui est au centre de l’élément.

<!DOCTYPE HTML> 
<html lang="fr"> 
<head> 
<title>La rotation</title> 
<meta charset="UTF-8" /> 
<style> 
   #init { 
       position: absolute; 
       left: 50px; 
       top: 40px; 
       width: 100px; 
       height: 100px; 
       background-color: lightyellow; 
       border: 1px solid #000; 
   } 
   #transformation { 
       position: absolute; 
       left: 50px; 
       top: 40px; 
       width: 100px; 
       height: 100px; 
       background-color: yellow; 
       border: 1px solid #000; 
   } 
   .rotation-c { 
       transform: rotate(25deg); 
   } 
   .rotation-hg { 
       transform-origin: left top; 
 ...

Les transitions

1. Créer des transitions

Pour une propriété CSS spécifiée, les transitions vont vous permettre de passer d’une valeur à une autre, avec une transition donnée. Cette transition est déclenchée si un événement est détecté au niveau de l’élément concerné. Lorsque la transition est terminée, l’élément reprend ses paramètres CSS initiaux. Les transitions vont permettre de créer de véritables animations en CSS.

Pour créer une transition, il faut tout d’abord utiliser un événement sur un élément HTML spécifié. Vous pouvez utiliser par exemple une pseudo-classe comme :hover, :active ou :focus.

Vous devez indiquer ensuite quelles sont les propriétés que vous souhaitez utiliser avec la propriété transition-property. Puis, indiquer la durée de cette transition avec la propriété transition-duration. La propriété transition-timing-function va permettre de préciser la courbe de cinétique pour la transition : une accélération ou une décélération. Enfin, la propriété transition-delay spécifie s’il y a un retard de déclenchement à appliquer à la transition. Pour utiliser toutes ces propriétés, la syntaxe raccourcie est transition.

La plupart des propriétés CSS des boîtes sont utilisables dans les transitions.

2. Créer un déplacement horizontal

Pour ce premier exemple, nous allons déclencher un déplacement...

Les animations

1. Créer des animations

Comme toute animation, les animations CSS se déroulent dans le temps. Le temps est géré par les « images-clés », les keyframes en anglais. Une image-clé est une étape dans une animation où l’élément animé opère un changement. Ce changement s’applique sur une propriété CSS. C’est la règle @keyframes qui gère les étapes de votre animation. Chaque animation doit avoir une règle @keyframes nommée. Une des différences qu’il y a avec les transitions, c’est que les animations n’ont pas besoin d’un événement pour les déclencher.

Vous devrez déterminer les différentes étapes de votre animation dans le temps et indiquer les changements à apporter aux différentes propriétés CSS. Chaque étape dans le temps pourra être identifiée avec une valeur de pourcentage. La valeur 0% représente le début et 100% indique la durée totale de l’animation.

Pour créer les animations, nous allons utiliser plusieurs propriétés.

Vous allez pouvoir indiquer combien de temps doit durer l’animation avec la propriété animation-duration.

La cinétique de l’animation est gérée par la propriété suivante : animation-timing-function.Vous pourrez appliquer des accélérations et des décélérations, de manière similaire à ce que nous avons vu précédemment pour les transitions.

Ensuite, vous pourrez indiquer si l’animation doit se répéter. C’est la notion d’itération. C’est la propriété animation-iteration-count qui permet de le préciser.

La propriété animation-delay indique si l’animation doit commencer immédiatement ou avec un délai.

La propriété animation-direction vous permet d’indiquer si l’animation doit se jouer dans le sens où elle a été définie ou dans le sens inverse.

La propriété animation-play-state précise l’état de l’animation. Est-elle jouée...