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 ...
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 ...
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
