animation-delay

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Die animation-delay CSS Eigenschaft gibt die Zeitspanne an, die gewartet werden soll, nachdem die Animation auf ein Element angewendet wurde, bevor die Animation ausgeführt wird. Die Animation kann später starten, sofort von Anfang an, oder sofort und teilweise in der Mitte der Animation.

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 #333;
  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%;
  }
}

"use strict";

window.addEventListener("load", () => {
  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();
});

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

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, zu dem die Animation beginnen soll. Dies kann entweder in Sekunden (s) oder Millisekunden (ms) angegeben werden. Die Einheit ist erforderlich.

Ein positiver Wert gibt an, dass die Animation nach der angegebenen Zeitspanne beginnen soll. Ein Wert von 0s, was der Standard ist, bedeutet, dass die Animation beginnt, sobald sie angewendet wird.

Ein negativer Wert bewirkt, dass die Animation sofort beginnt, jedoch teilweise während ihres Zyklus. Zum Beispiel, wenn Sie -1s als Animationsverzögerungszeit angeben, beginnt die Animation sofort, allerdings 1 Sekunde nach Beginn der Animationssequenz. Wenn Sie einen negativen Wert für die Animationsverzögerung angeben, aber der Startwert implizit ist, wird der Startwert von dem Moment übernommen, in dem die Animation auf das Element angewendet wird.

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

Hinweis: animation-delay hat keinen Einfluss auf CSS scroll-gesteuerte Animationen.

Formale Definition

Anfangswert0s
Anwendbar aufalle Elemente, ::before und ::after Pseudoelemente
VererbtNein
Berechneter Wertwie angegeben
AnimationstypNot 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);
  }
}

Ergebnis

Fahren Sie mit der Maus über das Rechteck, um die Animation zu starten.

Siehe CSS-Animationen für Beispiele.

Spezifikationen

Specification
CSS Animations Level 1
# animation-delay

Browser-Kompatibilität

Siehe auch