Propriété CSS animation-duration

❮ Précédent Suivant ❯

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>

Essayez-vous-même!

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>

Essayez-vous-même!

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.