Animation avec CSS

De EduTech Wiki
Aller à la navigation Aller à la recherche

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 é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 mode de remplissage de l'animation : Cette fonction permet d'indiquer le style lorsque l'animation n'est pas en cours.
  • ...

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

Références