Propriété CSS transition-property

❮ Précédent Suivant ❯

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>

Essayez-vous-même!

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>

Essayez-vous-même!

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.