Transitions et animations

Transitions

Les transitions permettent d’animer facilement des éléments de la page sans recourir à JavaScript.

Un exemple rapide

a {
    color: blue;
}
a:hover {
    color: green
}

Survolez-moi !

Le lien passe sans transition d’orange à vert lorsqu’il est survolé.

La propriété transition permet une animation fluide (plutôt qu’un saut d’un état à un autre). C’est une propriété abrégée qui combine les propriétés suivantes (qui peuvent être utilisées individuellement):

On l’applique sur l’élément dans son état initial :

a {
    transition: color 500ms linear 0ms;
    color: blue;
}
a:hover {
    color: green
}

Survolez-moi !

La valeur de la propriété de transition indique ici que seule la couleur sera animée, en une demi-seconde, de manière linéaire et sans délai.

Pour qu’une transition ait lieu, seule la durée de la transition est requise, le reste étant par défaut : transition-property: all; transition-timing-function: ease; transition-delay: 0;.

Easing

La propriété transition-timing-function indique comment le navigateur doit gérer les états intermédiaires de la transition.

La propriété décrit une courbe cubique de Bézier : ease produit une accélération progressive au début de la transition et une décélération progressive à la fin ; linear maintient une vitesse constante tout au long de l’animation ; ease-in produit une accélération progressive et ease-out une décélération progressive.

Pour plus de finesse, il est possible de saisir une fonction plus précise :

a {
    transition: color 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
}
Linear linear
Ease In Quad cubic-bezier(0.550, 0.085, 0.680, 0.530)
Ease Out Cubic cubic-bezier(0.215, 0.610, 0.355, 1.000)
Ease In Out Expo cubic-bezier(1.000, 0.000, 0.000, 1.000)

Voir easings.net pour un large ensemble de possibilités.

Animations

La règle @keyframes permet de définir les étapes qui composent la séquence d'une animation CSS de manière plus précise qu’avec les transitions, et sans qu’un changement d’état soit nécessaire.

Les animations peuvent être entendues comme une séquence de plusieurs règles. Contrairement aux transitions, qui ne peuvent alterner qu’entre deux états, les animations permettent de déterminer des étapes intermédiaires, peuvent être mises en boucle et offrent une plus grande maîtrise.

Un exemple :

@keyframes bounce {
    0%   { bottom: 0; box-shadow: 0 0 5px rgba(0,0,0,0.5);}
    100% { bottom: 50px; box-shadow: 0 50px 50px rgba(0,0,0,0.1);}
}
.ball{ animation: bounce 0.5s cubic-bezier(0.1,0.25,0.1,1) 0s infinite alternate both;}

Sur l’élément que l’on souhaite animer, on peut définir :

Un autre exemple :

.shake {
    opacity: 1;
    animation: shake linear .2s infinite;
}

@keyframes shake {
    0%    { transform:  translateX(0px) }
    33%   { transform:  translateX(2px) }
    66%   { transform:  translateX(-2px) }
}
shake!

N. B. : L’animation ci-dessus utilise en outre les transformations CSS.