Animation avec CSS

Avec CSS3, il est possible de créer quelques animations directement depuis la stylesheet (.css). Les animations en CSS ont deux étapes principales : la définition de l'animation dans un premier temps, puis l'attribution de cette animation et de propriétés d'animation à un élément du DOM.

Animation de base

Pour définir l'animation, on indique @keyframes suivi du nom que l'on veut donner à l'animation. Ensuite, on va créer deux blocs d'attributs CSS. Le premier bloc from définit les valeurs de départ des attributs, et le second bloc to définit les valeurs de fin de ces mêmes attributs. L'animation est la transition entre ces deux états.

Ensuite, on va lier l'animation à l'élément que l'on veut animer. Pour cela, on ajoute la propriété animation-name à l'élément visé. Cette propriété prendra comme valeur le nom qu'on a donné à l'animation. Le deuxième paramètre essentiel pour que l'animation ait lieu est la propriété animation-duration qui définit sa durée (par exemple en secondes). Si cette propriété n'est pas spécifiée, il n'y aura pas d'animation car la valeur par défaut est de 0 seconde.

Voici un exemple de code :

/* Exemple de code d'animation */
@keyframes example {
    from {background-color: red;}
    to {background-color: yellow;}
}

/* mise en forme css de base de l'élément à animer */
div {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
}

Cet exemple est tiré du site w3schools et vous pouvez tester le code ici.

Animation à plusieurs étapes

Vous pouvez définir plus de deux étapes dans l'animation en utilisant des pourcentages au lieu de from et to, où 0% représente le début de l'animation et 100% la fin :

@keyframes example {
    0%   {background-color: red;}
    25%  {background-color: yellow;}
    50%  {background-color: blue;}
    100% {background-color: green;}
}
/*tiré de W3Schools*/

Retarder une animation

Il est possible de retarder une animation en ajoutant une propriété animation-delay à l'élément animé. L'exemple ci-dessous reprend l'élément div vu dans l'animation de base, en y ajoutant un délai de 3 secondes :

div {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-delay: 3s;
}

Répéter une animation

Il est possible de rejouer une animation en ajoutant une propriété animation-iteration-count à l'élément animé. Si on souhaite que l'animation soit joué indéfiniment, il faut assigner la valeur infinite à la commande animation-iteration-count.

L'exemple ci-dessous reprend l'élément div vu dans l'animation de base. L'animation sera jouée trois fois :

div {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: 3;
}

L'exemple ci-dessous reprend l'élément div à nouveau pour établir une animation qui sera joué indéfiniment à travers la valeur infinite placé dans la commande animation-iteration-count:

div {
    width: 100px;
    height: 100px;
    background-color: green;
    animation-name: example;
    animation-duration: 5s;
    animation-iteration-count: infinite;
}

Définir le sens d'une animation

Il est possible de changer le sens d'une animation en ajoutant une propriété animation-direction à l'élément animé. Par exemple, avec la valeur reverse inverse le mouvement de l'animation, se fera dans un premier temps de l'arrière à l'avant puis, en avant. Alors qu'avec la valeur alternate, l'animation est jouée en avant puis en arrière.

L'exemple ci-dessous reprend l'élément div vu dans l'animation de base, la commande animation-direction indique d'effectuer l'animation dans un sens, puis d'effectuer l'animation inverse. La commande animation-iteration-count est ajoutée pour pouvoir effectuer les deux animation (1 pour l'aller et 1 pour l'animation retour) :

div {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: 2;
    animation-direction: alternate;
}

Autres fonctions (à compléter)

Vous pouvez également :

• modifier la courbe de vitesse de l'animation : Selon les valeurs choisies pour la propriété, l'animation pourra avoir une accélération linéaire, un début et/ou une fin rapide, un début et/ou une fin lente, etc.
• indiquer le style de l'animation : Cette fonction permet d'indiquer les propriétés de l'animation lorsque celle-ci n'est pas en cours.
• interrompre une animation et/ou la reprendre

Propriétés d'animation

Propriété	Description
@keyframes	Spécifie le code de l'animation (quels attributs changent)
animation	Raccourci permettant d'ajouter en une ligne tous les réglages de l'animation
animation-delay	Indique le délai pour avant le début de l'animation
animation-direction	Indique si l'animation doit jouer à l'envers ou en alternance (du début à la fin, puis de la fin au début, etc.)
animation-fill-mode	Indique un style pour l'élément lorsque l'animation ne joue pas (lorsqu'elle est retardée ou terminée)
animation-iteration-count	Indique combien de fois l'animation doit être jouée
animation-name	Indique le nom de l'animation définie avec @keyframes
animation-play-state	Indique si l'animation joue ou est en pause
animation-timing-function	Indique la courbe de vitesse de l'animation

Tableau extrait de W3Schools

Exemple

Dans cet exemple simple, on met en forme l'élément <p> afin que le texte passe de la droite vers la gauche de l'écran :

p {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

Liens

• Exemple d'animation simple en CSS : http://codepen.io/mafritz/pen/ammyxN
• Utiliser les animations CSS
• Utiliser une bibliothèque avec des animations en CSS

Références

• Tutoriel sur les animations CSS : W3Schools