Les animations en CSS

Histoire

L'animation CSS apparaît dans la version 3 du CSS depuis 2010 en pleine guerre des navigateurs.

Elle permet l'application d'animations basiques, de translation, rotation, transition sans recourir au JavaScript. Même si elle existe depuis 2010, elle n'est pleinement intégrée par l'ensemble des navigateurs qu'à partir de 2015 (lancement de Edge).

Faire une animation basique

Nous allons faire une animation trés simple, un bloc va de haut en bas en continue. Commençons par le style de base

<div class='exempleAnimate'>
</div>

.exempleAnimation{
- width:300px;
- height:500px;
- background:#555;
}

A présent définissons notre animation grâce au sélécteur @keyframes. Il existe une propriété de CSS qui permet de traduire un mouvement translate.

Ici nous allons utiliser la proprité translateY pour traduire le mouvement de haut en bas

@keyframes UpDown{
- /*au départ*/
  0%{translateY(20px);}
- /*à mis chemin*/
  50%{translateY(0);}
- /*au final*/
  100%{translateY(20px);}
}
[...]

Pour finir nous allons ajouter cette animation à notre bloc grace à propriété animation

[...]
.exempleAnimation{
- width:300px;
- height:500px;
- background:#555;
- animation: UpDown infinite 3s;
}

Voici la liste des valeurs associées à la propriétéanimation. On peut les définir indépendement les une des autres

Nom	Définition	Valeur par défaut
animation-name	Nom de l'animation @keyframes	none
animation-duration	définit la durée d'une animation pour parcourir un cycle	0s
animation-timing-function	définit la façon dont une animation CSS doit se dérouler au fur et à mesure de chaque cycle	ease
animation-delay	définit la durée d'attente avant de démarrer une animation une fois qu'elle a été appliquée à un élément.	0s
animation-iteration-count	indique le nombre de cycles utilisés pour répéter une animation avant que celle-ci s'arrête.	1
animation-direction	indique si les cycles de l'animation doivent être joués dans le sens inverse et/ou de façon alternée.	normal
animation-fill-mode	indique la façon dont une animation CSS doit appliquer les styles à sa cible avant et après son exécution.	none
animation-play-state	définit si une animation est en cours d'exécution ou si elle est en pause.	running