La propriété CSS transition-property

La propriété CSS transition-property définit quelles propriétés d'un élément doivent être animées lorsque leurs valeurs changent. Elle accepte une liste de noms de propriétés séparés par des virgules, ou le mot-clé all pour faire la transition de toutes les propriétés animables de l'élément.

Seule, transition-property ne produit aucun effet visible — elle ne fait que nommer les cibles. Vous avez également besoin d'une transition-duration supérieure à 0s pour que le changement soit progressif plutôt qu'immédiat. Dans la plupart des cas, on définit les quatre composantes à la fois avec la propriété raccourcie transition ; transition-property est la propriété longue à utiliser lorsqu'on souhaite contrôler le timing de chaque propriété séparément.

transition-property fait partie des propriétés CSS3.

Ce qui peut et ne peut pas être transitionné

Une propriété est animable uniquement lorsque CSS sait calculer les valeurs intermédiaires entre une valeur de départ et une valeur d'arrivée. En règle générale :

Transitionnable : tout ce qui possède une valeur numérique ou de couleur — width, height, opacity, color, background-color, transform, left/top, font-size, letter-spacing, box-shadow, etc.
Non transitionnable : les valeurs de mots-clés discrets qui n'ont pas de point médian significatif — display, position, float, font-family. Modifier ces valeurs produit un changement immédiat même si elles sont listées dans transition-property.

Avertissement

Toutes les propriétés CSS ne peuvent pas être transitionnées. Lister une propriété non animable (comme display) n'a aucun effet — le changement se produit immédiatement.

Info

Les préfixes vendeurs (par exemple -webkit-, -moz-, -o-) ne sont plus nécessaires pour les transitions CSS dans les navigateurs modernes.

Valeur initiale	all
S'applique à	Tous les éléments, les pseudo-éléments ::before et ::after.
Hérité	Non.
Animable	Non (contrôle quelles propriétés sont animées, mais n'est pas animée elle-même).
Version	CSS3
Syntaxe DOM	object.style.transitionProperty = "height";

Remarque : En CSS moderne, il est recommandé d'utiliser la propriété raccourcie transition à la place.

Syntaxe

Valeurs de CSS transition-property

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

Exemple de la propriété transition-property :

Exemple de code CSS transition-property

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 100px;
        height: 100px;
        background: #666;
        transition-duration: 1s;
        transition-property: height;
      }
      div:hover {
        height: 200px;
      }
    </style>
  </head>
  <body>
    <h2>Transition-property property example</h2>
    <p>Hover over the element to see the effect.</p>
    <div></div>
  </body>
</html>

Essayez vous-même »

Ici, seul height est animé. Comme width n'est pas listé, il changerait instantanément s'il était modifié — c'est précisément pour cela que nommer les propriétés est important.

Exemple de la propriété transition-property avec transition de la largeur et de la hauteur :

Autre exemple de code CSS transition-property

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 100px;
        height: 100px;
        background: #666;
        transition-duration: 1s;
        transition-property: width, height;
      }
      div:hover {
        width: 200px;
        height: 200px;
      }
    </style>
  </head>
  <body>
    <h2>Transition-property property example</h2>
    <p>Hover over the element to see the effect.</p>
    <div></div>
  </body>
</html>

Essayez vous-même »

Les deux noms de propriétés sont séparés par une virgule. Vous pourriez également écrire transition-property: all pour animer les deux à la fois, mais les lister explicitement évite d'animer accidentellement des propriétés non souhaitées.

Exemple de la propriété transition-property avec une transition de couleur d'arrière-plan :

Exemple de transition-property avec transition de la couleur d'arrière-plan :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 100px;
        height: 100px;
        background-color: #666666;
        transition-duration: 1s;
        transition-property: background-color;
      }
      div:hover {
        background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Transition-property property example</h2>
    <p>Hover over the element to see the effect.</p>
    <div></div>
  </body>
</html>

Essayez vous-même »

Exemple de la propriété transition-property avec transition de la couleur d'arrière-plan et du décalage de position gauche :

Exemple de transition-property avec transition de la couleur d'arrière-plan et du décalage de position gauche

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .element {
        padding: 1em;
        width: 30px;
        height: 30px;
        left: 0;
        cursor: pointer;
        background-color: #8ebf42;
        position: relative;
        transition-property: background-color, left;
        transition-duration: 1s, 1s;
        transition-timing-function: ease-out, cubic-bezier(.82, .1, .14, 1);
      }
      .element:hover {
        left: 250px;
        background-color: purple;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <p>Hover over the box to see the element's background color and left position offset transition.</p>
      <div class="element"></div>
    </div>
  </body>
</html>

Essayez vous-même »

Notez que la liste séparée par des virgules est associée par position : la première propriété (background-color) utilise la première durée et la première fonction de timing, tandis que la seconde propriété (left) utilise la seconde de chacune. Ce couplage positionnel permet à chaque propriété d'être animée avec sa propre transition-duration et sa propre transition-timing-function — ce que le mot-clé all ne permet pas.

Exemple de la propriété transition-property avec une transition de police :

Exemple de CSS transition-property avec les propriétés letter-spacing, font-size et line-height

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      span {
        display: inline-block;
        font-family: sans-serif;
        transition-duration: 0.6s;
        letter-spacing: 1px;
        font-size: 20px;
        line-height: 28px;
        color: #777777;
        transition-property: letter-spacing, font-size, line-height;
      }
      span:hover {
        color: #0f9881;
        letter-spacing: 6px;
        font-size: 26px;
        line-height: 34px;
      }
    </style>
  </head>
  <body>
    <h2>Transition-property property example</h2>
    <span>Hover over the text to see the effect</span>
  </body>
</html>

Essayez vous-même »

Valeurs

Valeur	Description
none	Aucun effet de transition n'apparaîtra.
all	L'effet de transition s'appliquera à toutes les propriétés.
property	Spécifie une liste de noms de propriétés CSS séparés par des virgules pour l'effet de transition.
initial	Définit cette propriété à sa valeur par défaut.
inherit	Hérite cette propriété de son élément parent.

Propriétés associées

transition-property est l'une des quatre propriétés longues qui composent une transition. On les utilise presque toujours ensemble :

transition-duration — la durée de l'animation.
transition-timing-function — la courbe d'accélération (ease, linear, cubic-bezier).
transition-delay — le délai avant le démarrage de l'animation.
transition — la propriété raccourcie qui définit les quatre en une seule déclaration.

Pratique

Quelle affirmation est correcte concernant transition-property ?

Toutes les propriétés CSS peuvent être transitionnées.La valeur 'all' peut être utilisée.On ne peut pas utiliser des noms de propriétés séparés par des virgules.