CSS : les transitions

Les transitions : première approche

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

Le code CSS et HTML correspondant

... img.exemple1{opacity : 0.2 ; width : 15% ; transition-property : opacity, width ; transition-duration : 2s ; } img.exemple1:hover {opacity : 1 ; width : 30% ;} 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 : 1% ;width : 40% ; height:100px; background : pink; transition : all 4s;} div:hover {background : red ; box-shadow : 5px 5px 5px grey ; width : 80% ; height :200px;} ... <img src = '../images/brune_nue.jpg' class ="exemple1" /> <img src = '../images/jolie_fille.jpg'class ="exemple1" /> <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>

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 ; .
En effet la valeur all veut dire toutes les propriétés CSS énumérée dans la deuxième règle de style (celle avec le déclencheur de transition).

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 ce qui est quand même plus simple que :
transition-property : background, box-shadow, width, height ; transition-duration : 4s ;

Les transitions CSS : approfondissements

Dans l'exemple précédent nous avons évoqué la méga propriété transition mais avec uniquement deux paramètres (propriétés concernées par la transition puis la durée de la transition).

Or la propriété transition peut comprendre jusqu'à 4 paramètres !

Survolez successivement sur les différentes images puis observez ...

Le code CSS & HTML correspondant

... #premiere{opacity : 0.2 ; width : 15% ; transition : all 10s ease-in 500ms ; } #premiere:hover {width : 45% ; opacity : 1 ; } #deuxieme{opacity : 0.2 ; width : 15% ; transition : opacity 10s linear 500ms ; } #deuxieme:hover {width : 45% ; opacity : 1 ; } #troisieme{opacity : 0.2 ; width : 15% ; transition : all 10s steps(4,start) 500ms ; } #troisieme:hover {width : 45% ; opacity : 1 ; } ... <body> ... <img src = '../images/tortue.jpg' id ='premiere'> <img src = '../images/toucan.jpg' id ='deuxieme'> <img src = '../images/palourde_royale.jpg' id ='troisieme'> ...

Les images sont identifiées premiere, deuxieme, troisieme.

Pour les trois images la transition démarre au bout d'une demi seconde (500ms) et dure 10 secondes.

Pour la première et troisième images la transition porte sur les propriétés width et opacity alors que pour la deuxième image la transition ne porte que sur la propriété opacity. Donc l'agrandissement cette image est instantané !

Pour la première image la transition sera lente au début et rapide à la fin (ease-in) alors que pour la deuxième image la vitesse de transition sera constante (linear) et pour la troisième image la transition est saccadée, par sauts (steps).

Pour les trois images la transition démarre 1 demi seconde après le chargement de la page (quatrième paramètre = 500ms).

Syntaxe de la méga propriété transition

Seuls les deux premiers paramètres sont obligatoires.

A la place de la méga propriété transition vous pouvez utiliser les quatre propriétés suivantes : transition-property, transition-duration, transition-timing-function, transition-delay.

Des menus déroulants en CSS

J'ai déjà dit que l'on pouvait réaliser des menus déroulants sans une ligne de programmation mais uniquement avec du HTML et CSS(voir "menus déroulants" dans le tuto "Débuter en HTML & CSS").
Il suffit de combinier astucieusement les propriétés CSS : position, height, z-index.

C'est plus joli lorsque le menu se déroule lentement ; donc lorsqu'il y a une transition. Menus déroulants avec transitions
Donc dans la feuille de style on a deux règles de style pour gérer cette transition :

nav div {display : inline-block ; width : 18.5%; height : 60px ; background : grey ; overflow : hidden ; vertical-align : top ; margin-left : 10px; transition : all 3s;} nav div:hover {background :pink; height : 200px ;}