CSS : les transitions avec CSS 3

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 depuis la version 3 de CSS on peut réaliser via deux règles de style grâce à la nouvelle propriété transition.

Les transitions : première approche

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

Boite définie avec la classe "box"

chaque image double de taille et devient bien opaque en deux secondes (effet "fondu")
chaque bouton devient ombré, le texte passe en rouge et s'agrandit en 3 secondes
La boite change de couleur de fond, double de taille et subit une rotation.

Le code HTML correspondant

<img src = '../images/brune_nue.jpg' class ="sexy" />
<img src = '../images/jolie_fille.jpg'class ="sexy" />
<button>bouton 1</button>
<button>bouton 2</button>
<div class ="box">Boite définie avec la classe "box"</div>

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 : 140%; box-shadow : 5px 5px 5px grey ; 
	background : navy; }
	
.box {border-width: 1px solid red;  display: block;  width: 100px; height: 100px;  background-color: blue;	}
.box:hover {background-color: red; width: 200px;  height: 200px;   transform: rotate(180deg);
	transition: width 3s, height 3s, background-color 3s, transform 3s;}

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 sur les différentes images puis observez ...

Le code HTML correspondant

	<p><img src = '../images/tortue.jpg' id ='premiere'>
	<br><img src = '../images/toucan.jpg' id ='deuxieme'>
	<br><img src = '../images/palourde_royale.jpg' id ='troisieme'>

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 10s ease-in 500ms; }
	
#deuxieme{opacity : 0.2 ; width : 15% ;  }
#deuxieme:hover {width : 45% ; opacity : 1 ; transition : opacity 10s linear 500ms  ;  }
	
#troisieme{opacity : 0.2 ; width : 15% ;  }
#troisieme:hover {width : 45% ; opacity : 1 ; transition : all 10s steps(4,start) 500ms  ; }

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

Pour les trois images la transition dure 10 secondes.

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

transition

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
quatrième paramètre : 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.

Rythme de la transition

Revenons plus en détail sur le rythme de la transition.

transition-timing-function

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

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

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

...
<style>
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; }
...
<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)

...
<style>
	img {width : 18%; vertical-align : top ;}
	.effacer{opacity : 0; width : 0% ; transition : all 5s;  }
...
<img src ="../images/burkini.jpg" />
<img src ="../images/bikini.jpg" />
<img src ="../images/trikini.jpg"  />
<img src ="../images/seins_nus.jpg" />
<img src ="../images/jolie_fille.jpg" />
<hr>
<button>Disparition lente des images</button>
<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.

Pour ceux qui ne comprennent rien au script. Sachez que vous trouverez dans ce site un tutoriel JavaScript pour débutants : Tuto JavaScript

Le rendu de ce code dans un iframe

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

Traduction

Tutoriel CSS - sommaire

Révisions CSS2

Nouveautés CSS3

Nouveautés CSS3 - suite

Transformations, transitions & animations

Tutoriel CSS3 - recherche

L'auteur : Patrick Darcheville

CSS : les transitions avec CSS 3

Définition d'une transition

Les transitions : première approche

Le code HTML correspondant

Le code CSS correspondant

Les transitions CSS : approfondissements

Le code HTML correspondant

Le code CSS correspondant

Syntaxe de la méga propriété transition

Rythme de la transition

Créer un diaporama uniquement en HTML & CSS

Le code de la page web

Aperçu dans un iframe

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

Code de la page (extrait)

Le rendu de ce code dans un iframe