Propriété CSS animation-duration

La propriété CSS animation-duration est utilisée pour définir le temps (en secondes/millisecondes), ce qui est nécessaire pour le passage d'un cycle d'animation. Très souvent, la propriété raccourcie animation est utilisée pour définir toutes les propriétés d'animation à la fois. La valeur par défaut pour la propriété animation-duration est 0.

Valeur initiale 0
Appliquée à Tous les éléments et les pseudo-éléments ::before and ::after.
Héritée Non.
Animable Non.
Version CSS3
Syntaxe DOM object.style.animationDuration = "4s";

Syntaxe

animation-duration: time | initial | inherit;

Essayons un exemple, où la durée de l'animation est 7 secondes.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <style>
      .element {
      padding: 50px;
      animation: pulse 7s infinite;
      }
      @keyframes pulse {
      0% { background-color: #8ebf42; }
      50% { background-color: #1c87c9; }
      100% { background-color: #eee }
      }
    </style>
  </head>
  <body>
    <div class="element">L'arrière-plan de ce texte est animé en utilisant la propriété CSS3 animation </div>
  </body>
</html>

Voyons un autre exemple, où la durée est définie 6 secondes.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <style>
      html, body {
      height: 100%;
      margin: 0;
      }
      body {
      display: flex;
      align-items: center;
      justify-content: center;
      }
      .element {
      height: 200px;
      width: 200px;
      background-color: #1c87c9;
      animation: nudge 6s ease infinite alternate,
      nudge 6s linear infinite alternate;
      }
      @keyframes nudge {
      0%, 100% { transform: translate(0, 0); }
      60% { transform: translate(150px, 0); }
      80% { transform: translate(-150px, 0); }
      }
    </style>
  </head>
  <body>
    <div class="element"></div>
  </body>
</html>

Valeurs

Valeur Description
time Spécifie le nombre de secondes ou de millisecondes nécessaires pour terminer un cycle d'animation. La valeur par défaut est 0.
initial Définit toutes les propriétés de l’élément ou de l’élément parent à leurs valeurs initiales.
inherit Définit, que toutes les propriétés de l’éléments sont héritées de l’élément parent.

Support de Navigateurs

43.0+
4.0-42.0 -webkit-
16.0+
5.0-15.0 -moz-
9.0+
5.1-8.0 -webkit-
12.0+
15.0-29.0 -webkit-


Trouvez-vous cela utile?

Articles Associées