Arts numériques

Les animations permettent de créer des effets divers indépendamment des actions du visiteur d’une page (même s’il est possible de les associer àun survol par exemple).

La base d’une animation sont les keyframes, un concept venu de l’animation traditionnelle, signifiant points-clés. Les points clés sont des moments identifiables dans la transformation d’un élément, comme indiqué dans le schéma ci-dessous.

En css, on crée donc une animation avec un nom choisi (pas de caractère spéciaux, pas d’espace) comme suit :

@keyframes mon_animation {
  0% {background-color: red; padding:20px}
  50% {background-color: yellow; padding:60px;}
  100% {background-color: red; padding:20px}
}

ou

@keyframes mon_animation {
  from {background-color: red; }
  to {background-color: yellow; }

}

On spécifie des changements àcertains pourcentage de l’animation, ou passer d’une position àune autre avec from et to. Dans le cas où on veut faire une animation en répétition constante, on utilisera les pourcentage et faisant se terminer l’animation à100% dans la même situation que celle à0%.

Un exemple rapide

<div class="truc">Un élément</div>

<style>
.truc {
width:300px;
padding:20px;
background-color:red;


animation-name: superanim;
animation-duration: 4s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}

@keyframes superanim {
  0% {background-color: red; padding:20px}
  50% {background-color: yellow; padding:60px;}
  100% {background-color: red; padding:20px}
}
</style>

Créer une animation

Créer une animation, c’est d’abord déclarer différents keyframe, c’est àdire les étapes clé de l’animation. Un départ et une fin, et un certain nombre d’étapes intermédiaires éventuelles.

Cette déclaration n’a pas la forme traditionnelle d’une sélecteur CSS, mais s’en rapproche. Elle commence par un @ pour bien s’en distinguer, suivi du mot keyframes et un nom àcréer pour l’occasion, sans espace ni caractère spéciaux.

@keyframes un_nom {
    from {font-size: 12px; }
    to {font-size: 24px; }
}

A l’intérieur de la déclaration, on va soit utiliser les sous-déclarations from et to. Si elles ne sont pas déclarées, le navigateur va supposer que cet état est l’état déjàdéclarés ailleurs dans la css.
On peut aussi utiliser des pourcentage pour remplacer from et to, pour exactement le même résultat.

@keyframes un_nom {
    0% {font-size: 12px; }
    100% {font-size: 24px; }
}

Plusieurs étapes et plusieurs déclarations

On peut àpartir de làdéduire le reste des déclarations compatibles avec @keyframes : on peut déclarer plusieurs étapes, et pour chacune de ces étapes, plusieurs déclarations CSS :

@keyframes un_nom {
    from { /* ou 0% */
        font-size: 12px; 
        color:rgba(255,0,0,0};
    } 
    25% { 
        font-size: 36px;
        /* pas besoin de définir la couleur si elle ne fait rien de spécial ici */
 }
    to { /* ou 100% */
        font-size: 24px; 
        color:rgba(255,0,0,1};
    } 
}

Voir la documentation sur @keyframes sur le site de Firefox.

Durée et répétition

Pour utiliser cette animation, il faut l’associer àun élément quel qu’il soit (pourvu que les déclaration css soient compatible avec celui-ci).
On va en profiter pour donner une durée d’animation àl’animation, qui n’est pas contenue dans le @keyframes. Est-ce que l’animation est rapide ou lente ? Il est donc possible d’utiliser la même animation pour deux éléments différents avec des vitesses différentes.

h2 {
    animation-name: un_nom;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}

.broum {
    animation-name: un_nom;
    animation-duration: 8s; 
    animation-iteration-count: 2;
    animation-fill-mode: forwards;
}

Par défaut, une animation est exécutée une seule fois. Si on veut la répéter en boucle, ou la répéter une nombre de fois défini, on utilise la fonction animation-iteration-count qui est faite pour ça, avec comme valeur infinite pour une boucle continue, ou un chiffre pour définir le nombre de répétitions.

Si on défini un nombre de répétition avec un chiffre, l’animation va s’arrêter àla position définie par ailleurs dans la css, ce qui peut produire une saute après l’animation. Il est donc préférable de définir où s’arrête l’animation : àla fin ou au début de l’animation. La déclaration animation-fill-mode : forwards déclare que l’élément s’arrêtera sur son état en fin d’animation, làou animation-fill-mode : backwards reviendra au début et

Voir la documentation générale sur les animations
ici
Voir la documentation sur les différentes déclarations liées aux animations ici