CSS3 Transition

Transitions CSS3

En CSS3, pour ajouter certains effets, nous pouvons effectuer une transition d'un style à un autre sans utiliser d'animations Flash ni JavaScript. Passez la souris sur les éléments suivants :

Survolez les éléments suivants :

CSS3
Transition

Prise en charge des navigateurs

Les nombres dans le tableau indiquent le premier numéro de version du navigateur qui prend en charge la propriété.

Le nombre précédant immédiatement -webkit-, -ms- ou -moz- est le premier numéro de version du navigateur qui prend en charge la propriété préfixée.

Propriété
transition 26.0
4.0 -webkit-		 10.0 16.0
4.0 -moz-		 6.1
3.1 -webkit-		 12.1
10.5 -o-
transition-delay 26.0
4.0 -webkit-		 10.0 16.0
4.0 -moz-		 6.1
3.1 -webkit-		 12.1
10.5 -o-
transition-duration 26.0
4.0 -webkit-		 10.0 16.0
4.0 -moz-		 6.1
3.1 -webkit-		 12.1
10.5 -o-
transition-property 26.0
4.0 -webkit-		 10.0 16.0
4.0 -moz-		 6.1
3.1 -webkit-		 12.1
10.5 -o-
transition-timing-function 26.0
4.0 -webkit-		 10.0 16.0
4.0 -moz-		 6.1
3.1 -webkit-		 12.1
10.5 -o-

Comment cela fonctionne-t-il ?

Les transitions CSS3 sont des effets qui modifient progressivement un élément d'un style à un autre.

Pour ce faire, deux choses doivent être spécifiées :

  • Spécifiez la propriété CSS à laquelle vous souhaitez ajouter l'effet.
  • Spécifiez la durée de l'effet.
OperaSafariChromeFirefoxInternet Explorer

Exemple

Un effet de transition appliqué à la propriété width, avec une durée de 2 secondes :

div { transition: width 2s; -webkit-transition: width 2s; /* Safari */ }

Remarque :Si la durée n'est pas spécifiée, la transition n'aura aucun effet, car la valeur par défaut est 0.

L'effet change lorsque la valeur de la propriété CSS spécifiée change. Un changement typique de propriété CSS se produit lorsque la souris de l'utilisateur survole un élément :

OperaSafariChromeFirefoxInternet Explorer

Exemple

Spécifiez quand le pointeur de la souris survole (:hover) l'élément <div> :

div:hover { width:300px; }

Essayez-le vous-même »

Remarque :Lorsque le curseur de la souris se déplace sur l'élément, il passe progressivement de son style d'origine.

Modifications multiples

Pour ajouter des effets de transition pour plusieurs styles, ajoutez les propriétés séparées par des virgules :

OperaSafariChromeFirefoxInternet Explorer

Exemple

Ajout des effets width, height et transform :

div { transition: width 2s, height 2s, transform 2s; -webkit-transition: width 2s, height 2s, -webkit-transform 2s; }

Essayez-le vous-même »

Propriété de transition

Le tableau suivant répertorie toutes les propriétés de transition :

Propriété Description CSS
transition Propriété raccourcie, utilisée pour définir quatre propriétés de transition en une seule propriété. 3
transition-property Spécifie le nom de la propriété CSS à laquelle la transition est appliquée. 3
transition-duration Définit le temps consacré à l'effet de transition. La valeur par défaut est 0. 3
transition-timing-function Spécifie la courbe de temporisation de l'effet de transition. La valeur par défaut est "ease". 3
transition-delay Spécifie quand l'effet de transition commencera. La valeur par défaut est 0. 3

Les deux exemples suivants définissent toutes les propriétés de transition :

OperaSafariChromeFirefoxInternet Explorer

Exemple

Utilisez toutes les propriétés de transition dans un seul exemple :

div { transition-property: width; transition-duration: 1s; transition-timing-function: linear; transition-delay: 2s; /* Safari */ -webkit-transition-property:width; -webkit-transition-duration:1s; -webkit-transition-timing-function:linear; -webkit-transition-delay:2s; }

Essayez-le vous-même »

OperaSafariChromeFirefoxInternet Explorer

Exemple

Même effet de transition que l'exemple ci-dessus, mais en utilisant la propriété raccourcie transition :

div { transition: width 1s linear 2s; /* Safari */ -webkit-transition:width 1s linear 2s; }

Essayez-le vous-même »
autres extensions