`animation-delay` CSS property

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit September 2015 browserübergreifend verfügbar.

Die animation-delay CSS-Eigenschaft legt die Zeitspanne fest, die abgewartet werden soll, bevor mit der Animation eines Elements begonnen wird. Die Animation kann später, sofort von Anfang an oder sofort und teilweise durch die Animation hindurch beginnen.

Es ist oft praktisch, die Kurzschreibweise animation zu verwenden, um alle Animationseigenschaften auf einmal festzulegen.

Probieren Sie es aus

animation-delay: 250ms;

animation-delay: 2s;

animation-delay: -2s;

<section class="flex-column" id="default-example">
  <div>Animation <span id="play-status"></span></div>
  <div id="example-element">Select a delay to start!</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 = "delaying";
  el.className = "";
  window.requestAnimationFrame(() => {
    window.requestAnimationFrame(() => {
      el.className = "animating";
    });
  });
}

el.addEventListener("animationstart", () => {
  status.textContent = "playing";
});

el.addEventListener("animationend", () => {
  status.textContent = "finished";
});

const observer = new MutationObserver(() => {
  update();
});

observer.observe(el, {
  attributes: true,
  attributeFilter: ["style"],
});

update();

Syntax

css

/* Single animation */
animation-delay: 3s;
animation-delay: 0s;
animation-delay: -1500ms;

/* Multiple animations */
animation-delay: 2.1s, 480ms;

/* Global values */
animation-delay: inherit;
animation-delay: initial;
animation-delay: revert;
animation-delay: revert-layer;
animation-delay: unset;

Werte

<time>

Der Zeitversatz, ab dem Moment, an dem die Animation auf das Element angewendet wird, bei dem die Animation beginnen soll. Dies kann entweder in Sekunden (s) oder Millisekunden (ms) angegeben werden. Die Einheit ist erforderlich.

Ein positiver Wert zeigt an, dass die Animation nach Ablauf der angegebenen Zeitspanne beginnen soll. Ein Wert von 0s, was der Standardwert ist, gibt an, dass die Animation sofort beginnen soll, sobald sie angewendet wird.

Ein negativer Wert bewirkt, dass die Animation sofort beginnt, aber teilweise durch ihren Zyklus hindurch. Zum Beispiel, wenn Sie -1s als Animationsverzögerung angeben, beginnt die Animation sofort, aber startet 1 Sekunde in der Animationssequenz. Wenn Sie einen negativen Wert für die Animationsverzögerung angeben, aber der Startwert implizit ist, wird der Startwert von dem Moment an genommen, in dem die Animation auf das Element angewendet wird.

Hinweis: Wenn Sie mehrere, durch Kommas getrennte Werte für eine animation-*-Eigenschaft angeben, werden sie in der Reihenfolge auf die Animationen angewendet, in der die animation-names erscheinen. Für Situationen, in denen die Anzahl der Animationen und der Werte der animation-*-Eigenschaft nicht übereinstimmen, siehe Festlegen mehrerer Animationswerte.

Hinweis: animation-delay hat keine Wirkung auf CSS-Scroll-gesteuerte Animationen.

Formale Definition

Anfangswert	`0s`
Anwendbar auf	alle Elemente, `::before` und `::after` Pseudoelemente
Vererbt	Nein
Berechneter Wert	wie angegeben
Animationstyp	Not animatable

Formale Syntax

animation-delay = 
  <time>#

Beispiele

Festlegen einer Animationsverzögerung

Diese Animation hat eine Verzögerung von 2 Sekunden.

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;
  animation-delay: 2s;
}

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