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>

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>

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.

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