CSS : les transitions

Survolez les images puis les boutons puis les boîte roses et observez ...

Boîte créée avec la balise DIV
Boîte créée avec la balise DIV

Les modifications observées

Le CSS permet depuis longtemps de modifier l'apparence d'un bloc ou d'un texte dans certaines circonstances (clic, survol de la souris,etc.) mais de façon instantanée !

Le but d'une transition est d'effectuer de façon fluide le passage d'un état à l'autre pendant une certaine durée.

Jusqu'à présent une transition c'était du ressort de jQuery (célèbre framework de JavaScript). Désormais on peut utiliser nativement le CSS !

Attention la transition en CSS ne fonctionne qu'avec des navigateurs récents !

Le code CSS de la page

img{opacity : 0.2 ; width : 100px ; transition-property : opacity, width ; transition-duration : 2s ; } img:hover {opacity : 1 ; width : 200px ;} button {display: block; background : skyblue ; transition-property : all ; transition-duration : 3s; } button:hover {color : red ; font-size : 140%; box-shadow : 5px 5px 5px grey ; background : navy; } div {display : inline-block ; margin : 10px ;width : 400px ; height:100px; background : pink; transition : all 4s;} div:hover {background : red ; box-shadow : 5px 5px 5px grey ; width : 800px ; height :200px;}

Le code HTML de la page

<img src = '../images/brune_nue.jpg'> <img src = '../images/jolie_fille.jpg'> <button>bouton 1</button> <button>bouton 2</button> <div>Boîte créée avec la balise DIV</div> <div>Boîte créée avec la balise DIV</div>

Commentaire du CSS

Dans le cadre de la transition sur les boutons la propriété transition-property a pour valeur all ce qui évite d'écrire : transition-property : background, color, box-shadow, font-size ;

Dans le cadre de la transition sur les boîtes DIV on utilise la méga propriété transition qui remplace les deux propriétés transition-property et transition-duration.
Donc il faut écrire dans la première règle de style : transition : all 4 s
Retour menu