Propriétés: transition

Utilisation des transitions

La propriété se décompose en plusieurs autres propriétés, décrite ici :

• transition-property : la(les) propriété(s) CSS à modifier.
• transition-duration : le temps total de la transition en secondes.
• transition-timing-function : la méthode d’interpolation (accélération, décélération)
• transition-delay : le temps en secondes avant que la transition ne démarre.

Il existe aussi la propriété raccourcie transition.

Voici un exemple de transition qui modifiera la taille de l’élément, qui durera 2 secondes et qui utilise une méthode ease, c’est à dire avec une accélération.

Et dans les navigateurs...

Pour le moment, les transitions CSS3 sont implémentées dans Chrome, Safari, Opéra et Firefox4. Cependant, pour pouvoir les utiliser, il faut préfixer toutes les règles avec -webkit, -moz- et -o-