Les transitions en CSS - suite

Les quatre paramètres de la méga propriété transition

Dans la page précédente 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 de la page (extraits)

<style> #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 de la deuxième 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).
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 "Révision CSS" dans ce tuto).
Il suffit de combinier astucieusement les propriétés CSS : position, height, z-index. Menus déroulants

Dans cet exemple le déroulement et l'enroulement sont instantanés !

Dans le deuxième exemple ci-dessous le déroulement (ou l'enroulement) est progressif ; c'est plus joli. Menus se déroulant progressivement

Il a suffi de rajouter une transition CSS !
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 ;}