Faire des animations en CSS3

Jusqu’à il y a quelques jours, je n’avais jamais eu l’occasion de me pencher sur les animations en CSS. J’avais l’habitude d’utiliser la fonctione animate de jQuery pour réaliser les quelques animations dont j’avais besoin. Mais dans le cadre de l’utilisation de Ionic, je n’ai pas pu utiliser jQuery et je me suis donc penché sur les animations réalisables en CSS3.

L’utilisation des keyframes

Pour définir une animation dans la feuille de style, il faut utilise la règle @keyframes. On peut alors indiquer toutes les propriétés visuelles de notre animation.

Copy 
1@keyframes my-animation {
2  from {
3    background-color: blue;
4  }
5  to {
6    background-color: red;
7  }
8}`

Ici on a donc crée une animation nommée “my-animation” qui commence par une couleur de fond bleu et finit avec une couleur de fond rouge. Les mots-clés “from” et “to” sont des alias de “0%” et “100%”, il est donc possible de préciser beaucoup plus d’états intermédiaires dans notre animation.

Copy 
1@keyframes my-animation {
2  0% {
3    background-color: blue;
4  }
5  25% {
6    background-color: green;
7  }
8  50% {
9    background-color: yellow;
10  }
11  75% {
12    background-color: pink;
13  }
14  100% {
15    background-color: red;
16  }
17}`

Utiliser la propriété animation

Maintenant que notre animation est créée visuellement, il nous faut l’ajouter à un élément et la configurer pour qu’elle nous convienne. Pour cela j’ai décidé de garder l’animation précédente de changement de couleur et de créer une classe correspondante. Ainsi chaque élément auquel je donne la classe possédera l’animation.

Copy 
1.my-animation {
2  animation-name: my-animation;
3  animation-duration: 4s;
4  animation-iteration-count: infinite;
5}`

La propriété “animation-name” permet de définir à quelle animation (définie @keyframes) je fais référence. “animation-duration” détermine la durée.

Par défaut, un élément retourne dans son état initial (avant le début de l’animation) une fois l’animation terminée. “animation-iteration-count” définit le nombre de répétitions de l’animation. J’ai ici choisi infinite pour que vous puissiez voir les animations sans avoir besoin de réactualiser la page.

En appliquant la classe my-animation à un carré de fond bleu que j’ai créée, on obtient alors le résultat suivant:

See the Pen css3-animation-base by Morgan (@Lheau) on CodePen.

On peut facilement multiplier les propriétés de l’animation pour en créer une plus complexe !

See the Pen css3-animation-complex by Morgan (@Lheau) on CodePen.

Il existe plusieurs autres propriétés permettant de paramétrer le déroulement de l’animation.

Copy 
1.my-animation {
2  animation-name: my-animation; /* Nom de l'animation */
3  animation-duration: 4s; /* durée de l'animation */
4  animation-delay: 2s; /* Temps avant commencement de l'animation (la première fois seulement) */
5  animation-direction: alternate; /* L'animation inverse est également effectuée */
6  animation-fill-mode: forwards; /* L'élément conserve les propriétés de fin de l'animation */
7  animation-iteration-count: infinite; /* L'animation se répète indéfiniment */
8}`

See the Pen css3-animation-complex2 by Morgan (@Lheau) on CodePen.

En plus de pourcentages des keyframes, on peut donner un “style” de vitesse d’animation à l’aide de la propriété “animation-timing-function” qui peut prendre les valeurs suivantes:

Copy 
1animation-timing-function: ease;
2animation-timing-function: ease-in;
3animation-timing-function: ease-out;
4animation-timing-function: ease-in-out;
5animation-timing-function: linear;
6animation-timing-function: step-start;
7animation-timing-function: step-end;`

Voici un petit exemple pour voir visuellement la différence de vitesse entre les différents timings:

See the Pen css3-animation-timing-fuction by Morgan (@Lheau) on CodePen.

A l’aide tous ces paramètres, il est possible de créer des animations assez précises uniquement via le CSS. Cela peut éviter d’alourdir inutilement une page avec du script ou de faire quelques animations simples.