Propriété transition CSS

Définition et utilisation

L'attribut transition est une propriété abrégée qui permet de configurer les quatre propriétés de transition :

Remarque :Configurez toujours transition-duration Sinon, si la durée est de 0, l'effet de transition ne sera pas généré.

Voir également :

Tutoriel CSS :Transition CSS

Manuel HTML DOM :Attribut transition

Exemple

Placez le pointeur de souris sur l'élément div, son largeur passera de 100px à 300px progressivement :

div {
  width: 100px;
  transition: width 2s;
}

Essayez-le vous-même

Syntaxe CSS

transition: property duration timing-function delay;

Valeur de l'attribut

Valeur Description
transition-property Définit le nom des propriétés CSS pour lesquelles l'effet de transition est appliqué.
transition-duration Définit combien de secondes ou de millisecondes est nécessaire pour terminer l'effet de transition.
transition-timing-function Définit la courbe de vitesse de l'effet de vitesse.
transition-delay Définit quand le effet de transition commence.

Détails techniques

Valeur par défaut : all 0 ease 0
Héritabilité : non
Version : CSS3
Syntaxe JavaScript : object.style.transition="width 2s"

Prise en charge du navigateur

Les nombres dans le tableau indiquent la première version du navigateur qui prend en charge cette propriété.

Les nombres précédés de -webkit-、-moz- ou -o- représentent la première version utilisant les préfixes.

Chrome IE / Edge Firefox Safari Opera
26.0
4.0 -webkit-		 10.0 16.0
4.0 -moz-		 6.1
3.1 -webkit-		 12.1
10.5 -o-