CSS : les transitions avec CSS3

Définition d'une transition

Il y a transition lorsque pour un élément HTML donné une ou plusieurs propriétés changent de valeurs (sur survol ou clic) non pas instantanément mais sur une certaine durée.
Pendant longtemps pour réaliser une transition il fallait recourir à JavaScript (et en particulier à jQuery).
Désormais depuis la version 3 de CSS on peut réaliser via deux règles de style.

Les transitions : première approche

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

Le code CSS et HTML correspondant

Pour réaliser une transition il faut donc deux règles de style. Prenons l'exemple de la transition portant les images :
• une première règle définit la forme avant transition et précise la nature de la transition : propriétés concernées par la transition avec la propriété transition-property (ici opacity et width) et durée de la transition avec la propriété transition-duration
• une deuxième règle de style précise l'événement déclencheur sous forme d'une pseudo classe (ici :hover) et précise les valeurs finales des propriétés concernées par la transition (opacity et width).

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

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

La méga propriété transition peut comprendre jusqu'à quatre paramètres :
• premier paramètre : propriétés concernées par la transition (liste des propriétés avec une virgule comme séparateur) ou all
• deuxième paramètre : durée de la transition en secondes
• troisième paramètre : le rythme de progression de la transition (par défaut ease)
• quatrième paramètre : délai de déclenchement (par défaut : 0s)

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.

Les différentes valeurs de la propriété transition-timing-function (ou troisième paramètre de transition) :
• ease : vitesse rapide au début et ralenti à la fin (valeur par défaut)
• linear: vitesse constante
• ease-in : lent au début et de plus en plus accéléré vers la fin
• ease-out : rapide sur le début et de plus en plus lent vers la fin
• ease-in-out : le départ et la fin sont lents
• steps(n,start/end) : transitition par "sauts" ; avec n le nombre de sauts ; "start" : premier saut dès le début de la transition ; end : dernier saut en fin de transitition

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 : auto ;}

Si survol d'un menu (DIV dans NAV) alors en trois secondes la hauteur passe de 60px (hauteur du titre du menu) à "auto" (donc les liens qui étaient masqués, apparaissent) et la couleur de fond passe de gris à rose.

Pour le reste du code voir la page "menus déroulants" dans le tutoriel "débuter en HTML & CSS"
Retour menu