W3docs
de
Anmelden

CSS animation-delay Eigenschaft

Die CSS animation-delay Eigenschaft legt fest, wann eine Animation startet. Beispiele und eigene Tests.

Die CSS animation-delay Eigenschaft legt fest, wie lange gewartet werden soll, bevor eine Animation abgespielt wird. Die Animation kann später beginnen (positiver Delay), sofort starten (0s, der Standardwert) oder an einem bestimmten Punkt in der Zeitachse einsteigen (durch einen negativen Delay).

Diese Seite behandelt die Syntax, positive und negative Delays, Millisekunden, das Verhalten von Delays bei mehreren Animationen sowie die Barrierefreiheitsaspekte, die zu beachten sind. Die animation-delay Eigenschaft gehört zu den CSS3-Eigenschaften und wird in der Regel zusammen mit animation-name und animation-duration verwendet.

Wozu animation-delay verwenden?

Ein Delay ist immer dann sinnvoll, wenn eine Animation nicht sofort beim Laden der Seite oder beim Hinzufügen des Elements zum DOM beginnen soll. Typische Anwendungsfälle:

  • Staffelung — Elementen einer Liste werden zunehmende Delays (0s, 0.1s, 0.2s, …) gegeben, sodass sie nacheinander animiert werden statt alle gleichzeitig.
  • Sequenzierung — Warten, bis die Animation eines Elements abgeschlossen ist, bevor eine andere beginnt.
  • Pre-Rolling — Ein negativer Delay versetzt ein Element mitten in eine Endlosanimation, sodass es nicht von Anfang an "einschnappt".

So funktioniert der Wert

Der Standardwert ist 0s. Der Wert kann in Sekunden (s) oder Millisekunden (ms) angegeben werden.

  • Ein positiver Wert (animation-delay: 2s) wartet die angegebene Zeit, bevor die Animation ab dem ersten Keyframe abgespielt wird.
  • Ein Wert von 0s startet die Animation sofort.
  • Ein negativer Wert (animation-delay: -2s) startet die Animation sofort, aber so dargestellt, als hätte sie bereits die angegebene Zeit lang abgespielt. Der erste Teil der Animation wird übersprungen — er wird nie angezeigt.

Wenn mehrere durch Komma getrennte Werte angegeben werden, werden sie zyklisch auf die in animation-name aufgeführten Animationen verteilt. Zum Beispiel: animation-delay: 0s, 1s wendet 0s auf die erste Animation und 1s auf die zweite an.

Wenn die keyframes einer Animation den Startwert weglassen, verwendet der Browser die berechneten Stile des Elements zum Zeitpunkt des Animationsstarts.

Hinweis: animation-delay wirkt sich nur auf die erste Iteration aus. Er fügt keine Pause zwischen den Iterationen einer wiederholten Animation ein — dafür muss die Pause in die Keyframes selbst eingebaut werden.

EigenschaftWert
Anfangswert0s
Anwendbar aufAlle Elemente, ::before- und ::after-Pseudo-Elemente.
VererbbarNein.
AnimierbarNein.
VersionCSS3
DOM Syntaxobject.style.animationDelay = "1s";

Syntax

Syntax der CSS animation-delay Eigenschaft

animation-delay: time | initial | inherit;

Beispiel der animation-delay Eigenschaft:

Beispiel der CSS animation-delay Eigenschaft

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 120px;
        height: 120px;
        background: #1c87c9;
        position: relative;
        animation: delay 5s infinite;
        animation-delay: 3s;
      }
      @keyframes delay {
        from {
          left: 0px;
        }
        to {
          left: 300px;
        }
      }
    </style>
  </head>
  <body>
    <h2>Animation-delay example</h2>
    <p>Here the animation starts after 3 seconds.</p>
    <div></div>
  </body>
</html>
Probier es selbst »

Beispiel der animation-delay Eigenschaft mit einem negativen Wert:

Beispiel der CSS animation-delay Eigenschaft mit negativem Wert

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 100px;
        height: 100px;
        background: #ccc;
        position: relative;
        animation: delay 5s infinite;
        animation-delay: -2s;
      }
      @keyframes delay {
        from {
          left: 0px;
        }
        to {
          left: 300px;
        }
      }
    </style>
  </head>
  <body>
    <h2>Animation-delay example with negative value.</h2>
    <p>Here, the animation will start as if it had already been playing for 2 seconds.</p>
    <div></div>
  </body>
</html>
Probier es selbst »

Beispiel der animation-delay Eigenschaft in Millisekunden:

Beispiel der CSS animation-delay Eigenschaft mit Millisekunden

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 120px;
        height: 120px;
        background: #8ebf42;
        position: relative;
        animation: delay 5s infinite;
        animation-delay: 200ms;
      }
      @keyframes delay {
        from {
          left: 0px;
        }
        to {
          left: 300px;
        }
      }
    </style>
  </head>
  <body>
    <h2>Animation-delay example in milliseconds.</h2>
    <p>Here, the animation will start after 200ms.</p>
    <div></div>
  </body>
</html>
Probier es selbst »

Werte

WertBeschreibungAusprobieren
timeLegt die Anzahl der Sekunden (s) oder Millisekunden (ms) fest, die gewartet werden soll, bevor die Animation startet. Ist optional.Ausprobieren »
initialSetzt die Eigenschaft auf ihren Standardwert zurück.
inheritErbt die Eigenschaft vom übergeordneten Element.

Barrierefreiheit

Verzögerte und sich wiederholende Animationen können ablenkend wirken und bei Nutzern mit vestibulären Störungen Beschwerden auslösen. Respektieren Sie die Systemeinstellung des Nutzers mit der prefers-reduced-motion Media Query und deaktivieren (oder reduzieren) Sie Bewegungen, wenn dies angefordert wird:

@media (prefers-reduced-motion: reduce) {
  div {
    animation: none;
  }
}

Kurzschreibweise

animation-delay wird selten allein angegeben — es ist in der Regel der vierte Wert in der animation Kurzschreibweise, die alle Animations-Untereigenschaften kombiniert:

/* name | duration | timing-function | delay */
div {
  animation: delay 5s ease 3s infinite;
}

Verwandte Eigenschaften

Übung

Übung
Was ist die korrekte Definition der CSS animation-delay Eigenschaft?
Was ist die korrekte Definition der CSS animation-delay Eigenschaft?
Was this page helpful?