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
|
|
|
|
|---|---|---|---|
|
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?
Richtig!
Falsch!