Les effets de transitions permettent de changer graduellement d'un style vers un autre.

Transition sur largeur

Exemple de transition sur largeur en CSS3. Pour le test, survolez avec votre souris le cadre ci-dessous :


Attention: si durée à 0, pas d'effet!
Si vous voulez prévoir le navigateur Safari : -webkit-transition:width 2s;

Au lieu d'écrire le racourci : transition:width 2s;
On aurait pu détailler les propriétés par :
transition-property: width;
transition-duration: 2s;

L'accélération : transition-timing-function

• ease : Rapide sur le début et ralenti sur la fin.
• linear : La vitesse est constante sur toute la durée de l'animation.
• ease-in : Lent sur le début et accélère de plus en plus vers la fin.
• ease-out : Rapide sur le début et décèlere sur la fin.
• ease-in-out : Le départ et la fin sont lents.

Délai de déclenchement : transition-delay

transition-delay: 2s;