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;
    animation-direction: alternate;
}

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, la propriété reverse inverse le mouvement de l'animation. Avec la propriété alternate, l'animation est jouée en avant puis revient 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 encore par exemple :

• modifier la courbe de vitesse de l'animation (accélération au début, à la fin, etc.)
• ...

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

Références

• Tutoriel sur les animations CSS : W3Schools