Propriété CSS animation-duration

La propriété animation-duration définit la durée (en secondes ou en millisecondes) qu'une animation met pour accomplir un cycle. Un cycle correspond à une seule exécution du keyframe 0% jusqu'au keyframe 100% ; si l'animation se répète, cette durée s'applique à chaque répétition et non à la durée totale. La propriété raccourcie animation est très souvent utilisée pour définir toutes les propriétés d'animation en une seule fois, mais définir animation-duration séparément est utile lorsque vous souhaitez modifier uniquement le minutage tout en conservant le reste de la propriété raccourcie intacte.

La valeur par défaut est 0s, ce qui signifie que l'animation se termine instantanément et que les keyframes n'ont aucun effet visible. C'est la raison la plus fréquente pour laquelle une animation « ne fonctionne pas » : la règle @keyframes et animation-name sont correctes, mais aucune durée n'a été définie. Une animation a toujours besoin d'une durée non nulle pour être visible.

Les valeurs négatives sont invalides et provoquent l'ignorance de la propriété (certaines implémentations plus anciennes peuvent les traiter comme 0s). Si vous souhaitez un démarrage différé, utilisez animation-delay — un délai négatif y est valide et démarre l'animation en cours de route.

Comment la durée se combine avec les autres propriétés d'animation

La durée n'est qu'un élément parmi d'autres dans une animation. Elle fonctionne conjointement avec :

animation-name — la règle @keyframes à exécuter (indispensable pour que quoi que ce soit se produise).
animation-timing-function — la courbe de vitesse à l'intérieur de la durée (ease, linear, etc.).
animation-iteration-count — le nombre de répétitions de la durée (infinite pour des boucles sans fin).
animation-delay — le temps d'attente avant le début du premier cycle.

Par exemple, animation: pulse 2s ease-in-out 3 exécute les keyframes pulse trois fois, chaque cycle durant 2 secondes, pour un total de 6 secondes de mouvement.

Lorsque plusieurs valeurs séparées par des virgules sont spécifiées pour une propriété d'animation, elles sont appliquées dans l'ordre aux animations correspondantes définies dans animation-name. S'il y a plus de durées que de noms, les valeurs supplémentaires sont ignorées ; s'il y en a moins, la liste se répète en boucle depuis le début. Par exemple, avec deux noms d'animation et animation-duration: 1s, 2s, 3s, la troisième valeur est ignorée ; avec animation-duration: 1s, les deux animations utilisent 1s.

Secondes vs. millisecondes

1s et 1000ms sont équivalents — utilisez celui qui est le plus lisible. Les millisecondes sont pratiques pour les transitions UI courtes (250ms), les secondes pour les animations en boucle plus longues (6s). L'unité est obligatoire : animation-duration: 2 (sans unité) est invalide et la déclaration est ignorée.

La propriété animation-duration fait partie des propriétés CSS3.

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

Syntaxe

Syntaxe de la propriété CSS animation-duration

animation-duration: time | initial | inherit;

Exemple de la propriété animation-duration :

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

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

Essayez vous-même »

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

<!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;
      }
      @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	Essayer
time	Spécifie la durée qu'une animation met pour accomplir un cycle. Les valeurs peuvent être exprimé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`.	Essayer »
initial	Fait utiliser à la propriété sa valeur par défaut (`0s`).
inherit	La propriété hérite de la valeur de son élément parent.

Compatibilité des navigateurs

animation-duration est prise en charge par tous les navigateurs modernes. Elle n'est pas héritée et n'est pas elle-même animatable — modifier la durée en cours d'animation redémarre le minutage plutôt que de l'interpoler.

Propriétés associées

animation — la propriété raccourcie qui définit la durée avec le nom, le minutage, le délai, et bien plus encore.
animation-name — nomme la règle @keyframes à exécuter.
animation-delay — retarde le démarrage de l'animation.
animation-iteration-count — répète la durée un nombre de fois défini.
animation-timing-function — définit la courbe de vitesse au sein de la durée.
animation-fill-mode — contrôle les styles avant et après l'exécution de l'animation.

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 accomplir 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.