Tutoriel CSS3 - sommaire

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 à la libraire jQuery. Désormais c'est possible via le CSS.

Les transitions : première approche

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

Sur survol :
• chaque image double de taille et devient bien opaque en deux secondes (effet "fondu")
• chaque bouton devient ombré, le texte passe en rouge et sa taille double en 3 secondes
• La boite change de couleur de fond, de couleur de texte, double de taille et subit une rotation complète

Le code HTML correspondant

Le code CSS correspondant

img.sexy{opacity : 0.2 ; width : 15% ; 
	transition-property : opacity, width ; 
	transition-duration : 2s ; }
img.sexy:hover {opacity : 1 ; width : 30% ;}
	
button {display: block; background : skyblue ; 
	transition-property : all  ; 
	transition-duration : 3s; }
button:hover {color : red ; font-size : 2em; 
	box-shadow : 5px 5px 5px grey ; }
	
.box {border-width: 1px solid red;  display: block;  
	width: 100px; height: 100px;  
	background-color: blue; color : white;	}
.box:hover {background-color: red; color : black ; 
	width: 200px;  height: 200px;   
	transform: rotate(360deg);
	transition: width 3s, height 3s, background-color 3s, transform 3s;}

Pour réaliser une transition :
• une première règle définit la forme avant transition
• 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
• le raccourci "transition" (ou les propriétés préfixées "transition-") est situé dans la première ou deuxième règle de style

Transition sur les image : initialement les images sont quasi transparentes et petites.
L'image survolé devient totalement opaque et sa taille double.
La transition porte donc sur deux propriétés.

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 citées dans la deuxième règle de style (celle avec le déclencheur de transition).

Dans le cadre de la transition sur la boite "box", j'utilise le raccourci "transition" avec un liste de paire "propriété durée" ; chaque paire séparée par une virgule. Notez que le raccourci "transition" est écrite dans la deuxième règle de style.

Les transitions CSS : approfondissements

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

Or le raccourci transition peut comprendre jusqu'à 4 paramètres OU il existe quatre propriétés préfixés "transition-".

Survolez successivement les différentes images, le curseur doit rester au moins 5 secondes

Le code HTML correspondant

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

Le code CSS correspondant

#premiere{opacity : 0.2 ; width : 15% ;}
#premiere:hover {width : 45% ; opacity : 1 ; 
	transition : all 5s ease-in 500ms; }
	
#deuxieme{opacity : 0.2 ; width : 15% ;  }
#deuxieme:hover {width : 45% ; opacity : 1 ; 
	transition : opacity 5s linear 500ms  ;  }
	
#troisieme{opacity : 0.2 ; width : 15% ;  }
#troisieme:hover {width : 45% ; opacity : 1 ; 
	transition : all 5s steps(4,start) 500ms  ; }

J'utilise systématiquement le raccourci "transition".

Pour les trois images la transition dure 5secondes.

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

Pour la première image la transition sera lente au début et rapide à la fin (ease-in).
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

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

Seuls les deux premiers paramètres sont obligatoires.
Par défaut le troisième paramètre vaut "ease" et le quatrième vaut 0s. Respectez l'ordre !
A la place du raccourci transition vous pouvez utiliser quatre propriétés préfixées "transition-" : transition-property, transition-duration, transition-timing-function, transition-delay.

<>Vous verrez plus loin les animations CSS ; pour définir le rythme de l'animation vous utiliserez les mêmes termes.

Créer un diaporama uniquement en HTML & CSS

Par le passé il fallait utiliser javaScript.
En combinant transformations et transitions CSS on peut faire l'économie d'un script JS !

Le code de la page web

Le CSS :

section {position : relative; margin : 0 0 ; }
section figure {position : relative ; margin : 30px 0 ; width : 10%; transition : all 3s;}
section figure img{width : 90%;}
section figure figcaption {text-align : center; font-size : 1.2em;}

section figure:active {transform : scale(3) ; position : absolute ; left : 30% ; top : 100px; }

Le code HTML : ... <section> <h3>Cliquez sur chaque image pour l'agrandir (image et légende)</h3> <figure> <img src ="otarie.jpg"> <figcaption>Otarie</figcaption> </figure> <figure> <img src ="veau_marin.jpg"> <figcaption>Phoque - veau marin</figcaption> </figure> <figure> <img src ="grand_dauphin.jpg"> <figcaption>Dauphin</figcaption> </figure> <figure> <img src ="morse.jpg"> <figcaption>Morse</figcaption> </figure> </section> ...

Les boites figure sont par défaut positionnées à gauche avec une taille très réduite.
Sur clic, la figure sélectionnée est positionnée en absolue avec un changement d'échelle de 3.

Aperçu dans un iframe

Cliquez successivement sur chaque miniature !
Surtout maintenez le clic durant au moins 3 secondes (durée de la transition).

Appliquer un effet fondu à l'ensemble des images d'une page

Quand vous entendez "effet fondu" vous pensez utiliser jQuery et ses méthodes "fade".
Or dans l'exemple ci-dessous l'effet fondu est produit sans utiliser ce framework mais en combinant JS et CSS3.

Code de la page (extrait)

Le CSS :

	img {width : 18%; vertical-align : top ;}
	.effacer{opacity : 0; width : 0% ; transition : all 5s;  }

Le code HTML : ... <img src ="../images/burkini.jpg" /> <img src ="../images/bikini.jpg" /> <img src ="../images/trikini.jpg" /> <img src ="../images/bikini27.jpg" /> <img src ="../images/bikini28.jpg" /> <hr> <button>Disparition lente des images</button> ...

Le script :

...
document.querySelector("button").onclick = function()
{
	for (var i in document.images) 
	{
		document.images[i].classList.toggle("effacer");
			
	}
} // fin fonction 	
...

Notez la classe nommée "effacer" définissant une transition de 5 s sur deux propriétés.

La fonction anonyme ajoute / retire la classe "effacer" à toutes les images de la page.
J'ai en effet utilisé la méthode toggle() de l'objet classList qui ajoute ou retire (si elle existe déjà) la classe précitée.

Sachez que vous trouverez dans mon site un tuto sur JavaScript pour débutants : Tuto JavaScript

Ce document HTML dans un iframe

En combinant JS natif et CSS3, on obtient une solution alternative à jQuery en matière d'effets visuels.