animation-delay

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.

La propriétéCSSanimation-delay définit le temps à attendre entre l'application de l'animation sur un élément et le début de l'animation. L'animation peut démarrer plus tard, immédiatement depuis le début, ou immédiatement en étant déjà avancée.

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

Exemple interactif

animation-delay: 250ms;

animation-delay: 2s;

animation-delay: -2s;

<section>  <div>Animation <span></span></div>  <div>Sélectionnez un délai pour démarrer&nbsp;!</div></section>

#example-element {  background-color: #1766aa;  color: white;  margin: auto;  margin-left: 0;  border: 5px solid #333333;  width: 150px;  height: 150px;  border-radius: 50%;  display: flex;  justify-content: center;  align-items: center;  flex-direction: column;}#play-status {  font-weight: bold;}.animating {  animation-name: slide;  animation-duration: 3s;  animation-timing-function: ease-in;  animation-iteration-count: 2;  animation-direction: alternate;}@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 status = document.getElementById("play-status");function update() {  status.textContent = "décalée";  el.className = "";  window.requestAnimationFrame(() => {    window.requestAnimationFrame(() => {      el.className = "animating";    });  });}el.addEventListener("animationstart", () => {  status.textContent = "en cours";});el.addEventListener("animationend", () => {  status.textContent = "terminée";});const observer = new MutationObserver(() => {  update();});observer.observe(el, {  attributes: true,  attributeFilter: ["style"],});update();

Syntaxe

css

/* Animation seule */animation-delay: 3s;animation-delay: 0s;animation-delay: -1500ms;/* Animations multiples */animation-delay: 2.1s, 480ms;/* Valeurs globales */animation-delay: inherit;animation-delay: initial;animation-delay: revert;animation-delay: revert-layer;animation-delay: unset;

Valeurs

<time>

Le décalage temporel, à partir du moment où l'animation est appliquée à l'élément, sur lequel l'animation doit commencer. Cette valeur peut être indiquée en secondes (s) ou en millisecondes (ms). L'unité est obligatoire.

Une valeur positive indique que l'animation doit commencer après le temps indiqué. Une valeur de0s, qui est la valeur par défaut, indique que l'animation doit commencer dès qu'elle est appliquée.

Une valeur négative fait démarrer l'animation immédiatement, mais en cours de cycle. Par exemple, si vous définissez-1s comme délai d'animation, l'animation commencera immédiatement mais débutera à 1 seconde après le début de la séquence d'animation. Si vous indiquez une valeur négative pour le délai d'animation, mais que la valeur de départ est implicite, la valeur de départ est prise au moment où l'animation est appliquée à l'élément.

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 desanimation-name. Si le nombre d'animations et de valeurs de propriétéanimation-* ne correspond pas, voirDéfinir plusieurs valeurs de propriétés d'animation.

Note :animation-delay n'a aucun effet sur lesanimations CSS pilotées par le défilement.

Définition formelle

Valeur initiale	`0s`
Applicabilité	tous les éléments, ainsi que lespseudo-éléments `::before` et`::after`
Héritée	non
Valeur calculée	comme défini
Type d'animation	Non animable

Syntaxe formelle

animation-delay =
<time>#

Exemples

Définir un délai d'animation

Cette animation a un délai de 2 secondes.

HTML

html

<div></div>

CSS

css

.box {  background-color: rebeccapurple;  border-radius: 10px;  width: 100px;  height: 100px;}.box:hover {  animation-name: rotate;  animation-duration: 0.7s;  animation-delay: 2s;}@keyframes rotate {  0% {    transform: rotate(0);  }  100% {    transform: rotate(360deg);  }}