Propriété CSS `transition`

La propriété CSS transition est une propriété abrégée pour les propriétés suivantes :

La propriété transition fait partie des propriétés CSS3.

Les valeurs transition-duration et transition-delay peuvent être spécifiées dans n'importe quel ordre. Cependant, si transition-duration est omis, il vaut par défaut 0s, ce qui empêche la transition de s'animer.

Les propriétés sont séparées par des virgules.

INFO

La valeur none est valide et désactive les transitions pour les propriétés spécifiées.

La propriété transition permet de spécifier la transition entre deux états d'un élément. Différents états peuvent être définis à l'aide de pseudo-classes comme :hover ou :active, ou avec l'aide de JavaScript.

INFO

Les préfixes fournisseurs comme -webkit-, -moz- et -o- sont obsolètes et généralement non requis pour les navigateurs modernes.

Valeur initiale	all 0s ease 0s
S'applique à	Tous les éléments, ::before et ::after pseudo-éléments.
Héritée	Non.
Animable	Non.
Version	CSS3
Syntaxe DOM	Object.style.transition = "all 3s";

Syntaxe

Syntaxe de la propriété CSS transition

css

transition: transition-property | transition-duration | transition-timing-function |  transition-delay | initial | inherit;

Exemple de la propriété `transition` avec la pseudo-classe `:active` :

Exemple de la propriété CSS transition

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 150px;
        height: 100px;
        background: #8ebf42;
        transition: width 2s;
      }
      div:active {
        width: 600px;
      }
    </style>
  </head>
  <body>
    <h2>Transition property example</h2>
    <p>Click and hold to see the transition effect.</p>
    <div></div>
  </body>
</html>

Try it Yourself »

Exemple de la propriété `transition` avec la pseudo-classe `:hover` :

Exemple de la propriété CSS transition avec la pseudo-classe :hover

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-color: #fff;
        color: #000;
        font-size: 1em;
        font-family: 'Roboto', Helvetica, sans-serif;
      }
      .element {
        padding: 20px;
        width: 50px;
        height: 50px;
        left: 0;
        background-color: #8ebf42;
        position: relative;
        transition: left 1s ease-in-out, background-color 1s ease-out 1s;
      }
      .example:hover .element {
        left: 400px;
        background-color: #1c87c9;
      }
      .element-2 {
        transition: none;
      }
    </style>
  </head>
  <body>
    <h2>Transition property example</h2>
    <div class="example">
      <p>Hover over the container to see the transition effect.</p>
      <div class="element element-1"></div>
      <p>No transition:</p>
      <div class="element element-2"></div>
    </div>
  </body>
</html>

Try it Yourself »

Valeurs

Valeur	Description
transition-property	Spécifie les noms des propriétés pour la transition.
transition-duration	Spécifie la durée de l'animation de la transition.
transition-timing-function	Spécifie la vitesse au fil du temps d'un objet qui passe d'une valeur à une autre.
transition-delay	Spécifie le temps d'attente avant qu'un effet de transition ne s'anime.
initial	Définit la propriété sur sa valeur par défaut.
inherit	Hérite la propriété de son élément parent.

Pratique

Quelles propriétés de la transition CSS peuvent être modifiées ?

Durée de la transitionFonction de temporisation de la transitionDélai de démarrage de la transitionCouleur de la transitionOpacité de la transition

Propriété CSS transition ​

Syntaxe ​

Exemple de la propriété transition avec la pseudo-classe :active : ​

Exemple de la propriété transition avec la pseudo-classe :hover : ​