Avec les transformations on peut réaliser des animations d’éléments mais les possibilités sont limitées. On peut définir le départ et l’arrivée mais on a aucun contrôle sur les étapes intermédiaires. Les animations quant à elles autorisent ces contrôles intermédiaires et permettent de réaliser des choses beaucoup plus élaborées. C’est ce qu’on va voir dans cet article.

Je me suis d’ailleurs un peu amusé à créer un support d’exercice pour détendre son cou, ce qui est très utile lorsqu’on passe de nombreuses heures devant un écran !

Pour créer une animation CSS on doit :

créer et nommer l’animation (avec @keyframes)
attacher cette animation à un élément (avec animation-name)

Notre première animation

On commence par créer une animation :

@keyframes taille {
    from {width: 100px;}
    to {width: 200px;}
}

On utilise la règle @keyframes et on nomme l’animation taille.

Il existe quelques règles avec le signe @ (nommées at-rules) qui permettent d’encapsuler plusieurs règles pour le processeur CSS du navigateur, par exemple @media, @page…

On va changer la largeur (width) de (from) 100px à (to) 200px.

On attache ensuite cette animation à un élément :

div {
    height: 100px;
    width: 200px;
    background-color: blue;
    animation-name: taille;
    animation-duration: 4s;
}

On utilise :

animation-name : pour désigner l’animation utilisée
animation-duration : pour définir la durée de l’animation (par défaut c’est 0)

Vous avez ça en action ici.

Plusieurs étapes

L’intérêt des animations est de pouvoir gérer des étapes intermédiaires. Voici une nouvelle version de l’animation :

@keyframes taille {
    0% {width: 100px;}
    50% {width: 200px;}
    100% {width: 100px;}
}

On a 3 étapes :

le départ (0%) avec une largeur de 100px
la moitié (50%) avec une largeur de 200px
l’arrivée (100%) avec une largeur de 100px

Vous avez ça en action ici.

Plusieurs propriétés

On peut aussi changer plusieurs propriétés :

@keyframes taille {
    0% {width: 50px; background-color: red}
    25% {width: 100px; background-color: yellow}
    50% {width: 150px; background-color: green}
    75% {width: 200px; background-color: blue}
}

Là on a 4 étapes avec une largeur qui augmente et la couleur de fond qui change de façon fluide.

Vous avez ça en action ici.

Démarrage différé

Dans les exemple ci-dessus l’animation commence dès le chargement, ce qui n’est pas toujours souhaitable. On dispose de la propriété animation-delay pour différer le départ de la durée voulue.

En poursuivant notre exemple ça pourrait donner ce code :

div {
    height: 100px;
    width: 200px;
    background-color: blue;
    animation-name: taille;
    animation-duration: 4s;
    animation-delay: 2s;
}

Vous avez ça en action ici.

Nombre d’exécutions

Par défaut une animation est exécutée une seule fois, si on en veut plus il faut utiliser la propriété animation-iteration-count. Toujours avec notre exemple :

div {
    height: 100px;
    width: 200px;
    background-color: blue;
    animation-name: taille;
    animation-duration: 4s;
    animation-iteration-count: 2;
}

Cette fois l’animation est exécutée 2 fois. En action ici.

Si on veut un nombre d’exécutions infini au lieu de mettre une valeur on entre infinite.

Sens de l’animation

Par défaut une animation va dans le sens normal mais on peut aussi l’obliger à aller dans l’autre sens en utilisant la propriété animation-direction. On dispose de deux valeurs :

reverse : on va dans le sens inverse
alternate : on alterne d’un sens à l’autre (dans ce cas évidemment il faut prévoir au moins deux exécutions)

div {
    height: 100px;
    width: 200px;
    background-color: blue;
    animation-name: taille;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

Ici on a un nombre d’exécutions infini et un mode alterné.

En action ici.

Progression de l’animation

On peut modifier l’animation avec la propriété animation-timing-function et ces valeurs :

ease : début rapide, puis ça accélère, puis ça ralentit à la fin (c’est l’effet par défaut)
linear : même vitesse du début à la fin
ease-in : début lent
ease-out : fin lente
ease-in-out : début et fin lents
cubic-bezier(n,n,n,n) : là on peut tout définir avec une courbe de Bezier

On a vu ça dans l’article précédent pour les transformations, c’est le même principe.

Vous avez une page de démonstration ici.

Le style avant et après l’animation

Le style avant et après l’animation est défini par défaut par les règles de l’élément. On a la possibilité de changer ce comportement en utilisant la propriété animation-fill-mode. On dispose de ces valeurs :

none : comportement par défaut (en gros ça sert à rien)
forwards : on garde les valeurs calculées lors de la dernière étape
backwards : on garde les valeurs calculées lors de la première étape

L’interprétation peut être délicate selon les répétitions et sens des animations. Vous pouvez trouver une bonne analyse sur cette page.

Par exemple avec ce code :

@keyframes taille {
    0% {width: 50px}
    100% {width: 200px}
}
div {
    height: 100px;
    width: 200px;
    background-color: blue;
    animation-name: taille;
    animation-duration: 4s;
    animation-delay: 2s;
    animation-fill-mode: backwards;
}

Au départ et pendant le délai de démarrage la largeur sera de 50px qui correspond à la première étape parce qu’on a utilisé la valeur backwards pour animation-fill-mode.

En action ici.

Action sur une animation

Pour l’instant on n’a pas vu de possibilité d’intervention sur une animation. On dispose de la propriété animation-play-state qui permet une interaction avec ces valeurs :

running : valeur par défaut de l’animation en action
paused : animation en pause

Voici le code d’un exemple où on met l’animation en pause en survolant l’élément :

@keyframes taille {
    0% {width: 50px}
    100% {width: 200px}
}
div {
    height: 100px;
    background-color: blue;
    animation-name: taille;
    animation-duration: 4s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: linear;
}
div:hover {
    animation-play-state: paused;
}

En action ici.

On peut faire exactement l’inverse et mettre l’animation en action seulement au survol :

@keyframes taille {
    0% {width: 50px}
    100% {width: 200px}
}
div {
    height: 100px;
    background-color: blue;
    animation-name: taille;
    animation-duration: 4s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: linear;
    animation-play-state: paused;
}
div:hover {
    animation-play-state: running;
}

En action ici.

On peut aussi gérer une animation avec Javascript, vous avez un exemple ici.