animation-duration

Baseline Widely available *

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis septembre 2015.

* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.

La propriété CSS animation-duration définit la durée nécessaire à une animation pour effectuer un cycle complet.

Il est souvent pratique d'utiliser la propriété raccourcie animation pour définir toutes les propriétés d'animation en une seule fois.

Exemple interactif

animation-duration: 750ms;

animation-duration: 3s;

animation-duration: 0s;

<section class="flex-column" id="default-example">
  <div class="animating" id="example-element"></div>
  <button id="play-pause">Lecture</button>
</section>

#example-element {
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-name: slide;
  animation-play-state: paused;
  animation-timing-function: ease-in;
  background-color: #1766aa;
  border-radius: 50%;
  border: 5px solid #333333;
  color: white;
  height: 150px;
  margin: auto;
  margin-left: 0;
  width: 150px;
}

#example-element.running {
  animation-play-state: running;
}

#play-pause {
  font-size: 2rem;
}

@keyframes slide {
  from {
    background-color: orange;
    color: black;
    margin-left: 0;
  }
  to {
    background-color: orange;
    color: black;
    margin-left: 80%;
  }
}

const el = document.getElementById("example-element");
const button = document.getElementById("play-pause");

button.addEventListener("click", () => {
  if (el.classList.contains("running")) {
    el.classList.remove("running");
    button.textContent = "Lecture";
  } else {
    el.classList.add("running");
    button.textContent = "Pause";
  }
});

Pour les animations basées sur le temps, auto est équivalent à une valeur de 0s (voir ci-dessous). Pour les animations CSS pilotées par le défilement, auto remplit toute la chronologie avec l'animation.

<time>

Le temps qu'une animation met pour effectuer un cycle complet. Cette valeur peut être indiquée en secondes (s) ou en millisecondes (ms). La valeur doit être positive ou nulle et l'unité est obligatoire.

Si aucune valeur n'est fournie, la valeur par défaut 0s est utilisée, auquel cas l'animation s'exécute tout de même (les évènements animationstart et animationend sont déclenchés). Le fait que l'animation soit visible ou non lorsque la durée est 0s dépend de la valeur de animation-fill-mode, comme expliqué ci-dessous :

Si animation-fill-mode est défini sur backwards ou both, la première image de l'animation telle que définie par animation-direction sera affichée pendant le compte à rebours de animation-delay.
Si animation-fill-mode est défini sur forwards ou both, la dernière image de l'animation sera affichée, telle que définie par animation-direction, après expiration du animation-delay.
Si animation-fill-mode est défini sur none, l'animation n'aura aucun effet visible.

Note : Les valeurs négatives sont considérées comme invalides. Certaines implémentations, préfixées, considèrent parfois que ces valeurs sont synonymes de 0s.

Note : Lorsque vous indiquez plusieurs valeurs séparées par des virgules sur une propriété animation-*, elles sont appliquées aux animations dans l'ordre d'apparition des animation-name. Si le nombre d'animations et de valeurs de propriété animation-* ne correspond pas, voir Définir plusieurs valeurs de propriétés d'animation.

Note : Lors de la création d'animations CSS pilotées par le défilement, définir une valeur animation-duration en secondes ou millisecondes n'a pas vraiment de sens. Lors des tests, cela ne semblait avoir aucun effet sur les animations de progression de défilement, tandis que sur les animations de progression de vue, cela semblait rapprocher l'animation de la fin de la chronologie. Cependant, Firefox exige qu'une valeur animation-duration soit définie pour appliquer correctement l'animation. Il est donc conseillé de définir animation-duration à 1ms afin que les animations fonctionnent dans Firefox, sans trop altérer l'effet.

Définition formelle

Valeur initiale	`0s`
Applicabilité	tous les éléments, ainsi que les pseudo-elements `::before` et `::after`
Héritée	non
Valeur calculée	comme spécifié
Type d'animation	Not animatable

Syntaxe formelle

animation-duration = 
  [ auto | <time [0s,∞]> ]#

Exemples

Définir la durée d'une animation

Cette animation a une durée d'animation de 0,7 seconde.

HTML

html

<div class="box"></div>

CSS

css

.box {
  background-color: rebeccapurple;
  border-radius: 10px;
  width: 100px;
  height: 100px;
}

.box:hover {
  animation-name: rotate;
  animation-duration: 0.7s;
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}