CSS-Eigenschaft animation-delay
Die CSS-Eigenschaft animation-delay legt fest, wann eine Animation starten soll. Die Animation kann später, sofort oder zu einem bestimmten Zeitpunkt in der Timeline beginnen (durch Verwendung eines negativen Verzögerungswerts).
Die Eigenschaft animation-delay ist eine der CSS3-Eigenschaften.
Der Standardwert ist 0. Negative Werte sind erlaubt. Wenn negative Werte verwendet werden, beginnt die Animation so, als würde sie bereits seit N Sekunden/Millisekunden laufen.
Wenn mehrere durch Kommas getrennte Werte für eine Animationseigenschaft angegeben werden, werden sie zyklisch zugewiesen, um der Anzahl der in animation-name definierten Animationen zu entsprechen.
Wenn die Keyframes einer Animation den Startwert auslassen, verwendet der Browser die berechneten Stile des Elements zum Zeitpunkt des Animationsbeginns.
| Eigenschaft | Wert |
|---|---|
| Startwert | 0s |
| Gilt für | Alle Elemente, ::before und ::after Pseudo-Elemente. |
| Vererbbar | Nein. |
| Animierbar | Nein. |
| Version | CSS3 |
| DOM-Syntax | object.style.animationDelay = "1s"; |
Syntax
Syntax der CSS-Eigenschaft animation-delay
animation-delay: time | initial | inherit;Beispiel für die Eigenschaft animation-delay:
Beispiel für die CSS-Eigenschaft animation-delay
<!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>Beispiel für die Eigenschaft animation-delay mit negativem Wert:
Beispiel für die CSS-Eigenschaft animation-delay 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>Beispiel für die Eigenschaft animation-delay in Millisekunden:
Beispiel für die CSS-Eigenschaft animation-delay in 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>Werte
| Wert | Beschreibung | Abspielen |
|---|---|---|
| time | Definiert die Anzahl der Sekunden (s) oder Millisekunden (ms), die gewartet werden soll, bevor die Animation startet. Optional. | Abspielen » |
| initial | Legt die Eigenschaft auf ihren Standardwert fest. | |
| inherit | Erbt die Eigenschaft vom übergeordneten Element. |
Praxis
Was ist die korrekte Definition der CSS-Eigenschaft animation-delay?