Propriété CSS transition

La propriété CSS transition est un raccourci pour les propriétés suvantes:

La proprété transition-duration doit être spécifiée premièrement, car, par défaut, cela sera 0s et la propriété n'aura aucun effet.

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

Si plus qu'une transition est spécifiée et quelqune des transitions a "none" comme transition-property, alors la déclaration n'est pas valide.

Les propriétés transition permettent de spécifier la transition entre les deux états d'un élément. Les différents états peuvent être définis en utilisants pseudo-classes tels que :hover ou :active ou à l'aide de JavaScript.

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 0s ease 0s
Appliquée à	Tous les éléments, pseudo-éléments ::before et ::after.
Héritée	Non.
Animable	Non.
Version	CSS3
Syntaxe DOM	Object.style.transition = "all 3s";

Syntaxe

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

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style> 
      div {
      width: 150px;
      height: 100px;
      background: #8ebf42;
      -webkit-transition: width 2s;
      -moz-transition: width 2s;
      -o-transition: width 2s;
      transition: width 2s;
      }
      div:active {
      width: 600px;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété transition </h2>
    <p>Cliquez et attendez pour voir l'effet de transition.</p>
    <div></div>
  </body>
</html>

Essayez-vous-même!

Un autre exemple avec la propriété transition:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du 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;
      -webkit-transition: left 1s ease-in-out, background-color 1s ease-out 1s;
      -moz-transition: left 1s ease-in-out, background-color 1s ease-out 1s;
      -o-transition: left 1s ease-in-out, background-color 1s ease-out 1s;
      transition: left 1s ease-in-out, background-color 1s ease-out 1s;
      }
      .example:hover .element {
      left: 400px;
      background-color: #1c87c9;
      }
      .element-2 {
      -webkit-transition: none;
      -moz-transition: none;
      -o-transition: none;
      transition: none;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété transition</h2>
    <div class="example">
      <p>Placez la souris sur le conteneur pour voir l'effet de transition.</p>
      <div class="element element-1"></div>
      <p>Pas de transition:</p>
      <div class="element element-2"></div>
    </div>
  </body>
</html>

Essayez-vous-même!

Valeurs

Valeur	Description
transition-property	Spécifie les noms des propriétés pour la transition.
transition-duration	Spécifie la duréé de l'animation de la transition.
transition-timing-function	Spécifie la vitesse au fil du temps d'un objet étant transitionné d'une valeur à une autre.
transition-delay	Spécifie le temps qu'on doit attendre avant un effet de transition sera animé.
initial	Fait utiliser la valeur initiale.
inherit	Hérite la propriété de son élément parent.