Propriété CSS animation-duration

La propriété animation-duration définit la durée (en secondes ou millisecondes) nécessaire à une animation pour compléter un cycle. Très souvent, la propriété raccourcie animation est utilisée pour définir toutes les propriétés d'animation en une seule fois. La valeur par défaut de la propriété animation-duration est 0s, ce qui signifie que l'animation se termine instantanément et que les keyframes n'ont aucun effet visible. Les valeurs négatives sont invalides et entraînent l'ignorance de la propriété. Cependant, certaines implémentations plus anciennes peuvent les traiter comme égales à 0s.

Lorsque plusieurs valeurs séparées par des virgules sont spécifiées pour une propriété d'animation quelconque, elles sont appliquées dans l'ordre aux animations correspondantes définies dans animation-name. S'il y a plus de valeurs que de noms d'animation, les valeurs reviennent au début.

La propriété animation-duration est l'une des propriétés CSS3.

Initial Value	0s
Applies to	All elements, ::before and ::after pseudo-elements.
Inherited	No.
Animatable	No.
Version	CSS3
DOM Syntax	object.style.animationDuration = "4s";

Syntaxe

Syntaxe de la propriété CSS animation-duration

css

animation-duration: time | initial | inherit;

Exemple de la propriété animation-duration :

Exemple de la propriété CSS animation-duration avec des secondes

html

<!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">Background of this text is animated using CSS3 animation property</div>
  </body>
</html>

Try it Yourself »

Exemple de la propriété animation-duration avec une durée de 6 secondes :

Exemple de la propriété CSS animation-duration avec 6 secondes

html

<!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>

Try it Yourself »

Valeurs

Value	Description	Play it
time	Spécifie la durée nécessaire à une animation pour compléter un cycle. Les valeurs peuvent être spécifiées en secondes (`s`) ou en millisecondes (`ms`). Notez que la valeur par défaut de la propriété elle-même est `0s`, et non le mot-clé `time`.	Jouer »
initial	Définit la valeur par défaut de la propriété.
inherit	Hérite la propriété de son élément parent.

Pratique

Quel est le rôle de la propriété CSS animation-duration et comment est-elle spécifiée ?

La propriété CSS animation-duration est utilisée pour définir le nombre de secondes ou de millisecondes qu'une animation prend pour un cycle complet.La propriété CSS animation-duration est utilisée pour définir la couleur de l'animation en CSS.La propriété CSS animation-duration est spécifiée en pourcentages.La propriété CSS animation-duration est spécifiée en secondes (s) ou en millisecondes (ms).La propriété CSS animation-duration est responsable de la définition de la direction de l'animation en CSS.

Propriété CSS animation-duration ​

Syntaxe ​

Exemple de la propriété animation-duration : ​

Exemple de la propriété animation-duration avec une durée de 6 secondes : ​