Propriété CSS transition-property

La propriété transition-property spécifie les noms des propriétés pour la transition. Cela peut être soit les noms séparés de virgules soit la valeur "all", qui peut être utilisée pour spécifier toutes les propriétés sur un élément à être transitionné.

Pas toutes les propriétés en CSS peuvent être transitionnées.
Pour la compatibilité maximale des navigateurs, des extensions, telles que -webkit- pour Safari, Google Chrome, et Opera (plus nouvelles versions), -moz- pour Firefox, -o- pour les plus anciennes versions d'Opera, sont utilisées avec cette propriété.
Valeur initiale all
Appliquée à Tous les éléments, les pseudo-éléments ::before et ::after.
Héritée Non.
Animable Non.
Version CSS3
Syntaxe DOM object.style.transitionProperty = "height";

Syntaxe

transition-property: none | all | property | initial | inherit;

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style> 
      div {
      width: 100px;
      height: 100px;
      background: #666;
      -webkit-transition-duration: 1s; 
      transition-duration: 1s;
      -webkit-transition-property: height;
      -moz-transition-property: height;
      -o-transition-property: height;
      transition-property: height;
      }
      div:hover {
      height: 200px;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété transition-property</h2>
    <p>Placez la souris sur l'élément pour voir l'effet.</p>
    <div></div>
  </body>
</html>

Un autre exemple, dans lequel la largeur et la hauteur de l'élément sont transitionnées:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style> 
      div {
      width: 100px;
      height: 100px;
      background: #666;
      -webkit-transition-duration: 1s; 
      -webkit-transition-property: width, height;
      -moz-transition-property: width, height;
      -o-transition-property: width, height;
      transition-property: width, height;
      transition-duration: 1s;
      }
      div:hover {
      width: 200px;
      height: 200px;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété transition-property</h2>
    <p>Placez la souris sur l'élément pour voir l'effet.</p>
    <div></div>
  </body>
</html>

Valeurs

Valeur Description
none Aucun effet de transition n'apparaît.
all L'effet de transition s'applique à toutes les propriétés.
property Spécifie une liste des noms des propriétés CSS séparées de virgules pour l'effet de transition.
initial Fait utiliser la valeur initiale.
inherit Hérite la propriété de son élément parent.

Support de Navigateurs

26.0+
1.0 -webkit-
12.0+ 16.0+
4.0 -moz- 49.0 -webkit-
6.1+
3.0 -webkit-
12.1+
15.0 -webkit-


Trouvez-vous cela utile?

Articles Associées