Les transitions css

CSS2 permettait de changer certains comportement visuels des éléments de la page, en survol par exemple. Un lien qui change de couleur, une typo qui s’agrandit, un bord qui s’épaissit, etc. Cependant, le passage d’un état àl’autre est immédiat et donc assez brutal visuellement, surtout s’il est important.
CSS3 permet de produire des animations sur ces changements, pour les rendre plus fluide.

Précédent | 12/13 | Suivant

Changer le comportement en survol de la souris
L’exemple le plus courant est le changement de comportement d’un élément en survol.

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

<style>
.moveme {
padding:20px;
border:1px solid #ddd;
width:400px;
background-color:#fff;
}

.moveme:hover {
background-color:red;
width:500px;
}
</style>

Le résultat est un bloc dont le font devient rouge en survol, et qui s’élargit. Comme mentionné précédemment, le tout se fait sans transition, brutalement, et en même temps.
Il est possible depuis CSS3 de rendre le passage d’un état àun autre plus fluide grâce aux transitions :

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

<style>
.moveme {
padding:20px;
border:1px solid #ddd;
width:400px;
background-color:#fff;
transition-property: width background-color;
transition-duration: 1s;
transition-timing-function: linear;
}

.moveme:hover {
background-color:red;
width:500px;
}
</style>

Nous avons ajouté trois lignes.
transition-property permet de choisir les attributs qui seront affectés par la transition. Dans l’exemple ci-dessus, ce sont la largeur et la couleur de fond. Si d’autres attributs changent de valeur, ils passeront de l’une àl’autre sans transition.
Si on veut que tous les attributs fassent l’objet d’une transition, on écrira :
transition-property:all;

transition-duration, sans surprise, désigne la vitesse de transition. Elle peut être définie en secondes ou millisecondes, par exemple 0.5s ou 500ms pour une demi-seconde, car une seconde vaut 1000 millisecondes (ms).

transition-timing-function permet de paramétrer la méthode de transition. Linear, dans notre exemple, fait passer d’un état àl’autre de manière régulière, mais on peut faire une transition qui démarre lentement et accélère, etc.
Il existe de nombreuses valeurs possible pour le timing-function, comme linear, ease, ease-in, ease-out, ease-in-out, et même la possiblilité de définir le mouvement avec un vecteur, par exemple cubic-bezier(0.42, 0, 0.58, 1) ;

transition-delay, pas présent dans l’exemple, permet de mettre un délai avant le début de l’animation.

Déclarations minimales

Attention, il faut au minimum utiliser la déclaration transition-property et transition-duration pour que quelque chose se passe. Les autres déclaration sont optionnelles.