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 legt die Zeitspanne fest, die gewartet werden soll, bevor die Animation auf ein Element angewendet wird. Die Animation kann später beginnen, sofort von Anfang an starten oder sofort und mit einem Teil der Animation beginnen.

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 bequem, die Kurzschreibweiseigenschaft 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 zeitliche Versatz, ab dem Moment, in dem die Animation auf das Element angewendet wird und 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 beginnen soll, nachdem die angegebene Zeitspanne vergangen ist. Ein Wert von 0s, der Standard ist, zeigt an, dass die Animation beginnen soll, sobald sie angewendet wird.

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

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

Hinweis: animation-delay hat keine Wirkung 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

Einstellung 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

Bewegen Sie die 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