CSS-Eigenschaft animation-delay

Die CSS-Eigenschaft animation-delay gibt an, wann eine Animation gestartet wird. Die Animation kann später, sofort von Anfang an oder sofort und teilweise durch die Animation beginnen.

Der Standardwert ist 0, negative Werte sind erlaubt. Wenn Sie negative Werte verwenden, startet die Animation so, als ob sie bereits seit N Sekunden/Millisekunden abgespielt worden wäre.

Anfangswert 0s
Gilt für Alle Elemente, Pseudo-Element ::before und ::after
Geerbt Nein
Animierbar Nein
Version CSS3
DOM Syntax object.style.animationDelay = "1s";

Syntax

animation-delay: time | initial | inherit;

Beispiel

<!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>Beispiel für animation-delay</h2>
    <p>Hier startet die Animation nach 3 Sekunden.</p>
    <div></div>
  </body>
</html>

Hier ist ein Beispiel für animation-delay mit einem negativen Wert.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <style> 
      div {
      width: 100px;
      height: 100px;
      background: #ccc;
      position: relative;
      animation: delay 5s 1;
      animation-delay: -2s;
      }
      @keyframes delay {
      from {left: 0px;}
      to {left: 300px;}
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für animation-delay mit negativem Wert.</h2>
    <p>Hier startet die Animation so, als ob sie bereits 2 Sekunden lang abgespielt worden wäre.</p>
    <div></div>
  </body>
</html>

Lassen Sie uns ein Beispiel mit Millisekunden sehen.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <style> 
      div {
      width: 120px;
      height: 120px;
      background: #8ebf42;
      position: relative;
      animation: delay 5s 1;
      animation-delay: 200ms;
      }
      @keyframes delay {
      from {left: 0px;}
      to {left: 300px;}
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für animation-delay in Millisekunden.</h2>
    <p>Hier startet die Animation nach 200ms.</p>
    <div></div>
  </body>
</html>

Werte

Wert Beschreibung
time Definiert die Anzahl der Sekunden (s) oder Millisekunden (ms), die gewartet werden, bevor die Animation startet. Es ist optional.
initial Es setzt die Eigenschaft auf den Standardwert.
inherit Es erbt die Eigenschaft von ihrem übergeordneten Element.

Browser-Support

chrome firefox safari opera
43.0+
4.0-42.0 -webkit-
16.0+
5.0-15.0 -moz-
9.0+
5.1-8.0 -webkit-
12.0+
15.0-29.0 -webkit-

Übe dein Wissen

Was kann die CSS-Eigenschaft 'animation-delay' beeinflussen?
Finden Sie das nützlich?