CSS-Eigenschaft: animation-delay, Kategorien: Animierte Inhalte (allgemein), Animations (CSS 3)
Startverzögerung einer Animation
Steuert, nach wie viel (Milli-)Sekunden eine Animation startet.
| Kurzbeschreibung | Werte | Standardwert | Kategorie | Hinweis |
|---|---|---|---|---|
| Startverzögerung einer Animation |
| 0 |
| Neu in CSS 3 |
Verwandte Eigenschaften aus der Kategorie: Animierte Inhalte (allgemein), Animations (CSS 3):
- animation
- Aktuelle Seite: animation-delay
- animation-direction
- animation-duration
- animation-fill-mode
- animation-iteration-count
- animation-name
- animation-play-state
- animation-timing-function
- marquee-direction
- marquee-play-count
- marquee-speed
- marquee-style
- transition
- transition-delay
- transition-duration
- transition-property
- transition-timing-function
Folgendes ist beim Einsatz von animation-delay zu beachten:
animation-delay steuert die Startverzögerung einer Animation.
Dabei werden Zeitwerte in s für Sekunden oder ms für Millisekunden erwartet.
Die über die @keyframes- bzw. @-webkit-keyframes-Regel definierte Animation
beginnt nach der angegebenen Verzögerung.
Die Startverzögerung bezieht sich lediglich auf den Start der Animation,
und nicht auf jede einzelne Wiederholung.
Nach der ersten Wiederholung geht die Animation sofort in die zweite (falls über
animation-iteration-count mehr als 1 Wiederholung definiert ist).
Bei animation-delay von 0s startet die Animation ohne Verzögerung, also sofort.
Für animation-delay sind negative Zeitwerte zulässig und wirkt sich als "Offset" aus.
Das bedeutet, die Animation wird an die Stelle "vorgespult", die beim Zeitwert von animation-delay erreicht wäre.
Animationen und animation-delay werden aktuell (Februar 2013) von Firefox und Opera (ab der Version 12.10) in der
Standardschreibweise, von Google Chrome und Safari in der Schreibweise mit dem Vendor-Präfix -webkit- unterstützt.
Weitere Informationen über Animationen sind (in Kürze) unter animation zu finden.
 Firefox |  Chrome |  Internet Explorer |  Safari |  Opera |
|||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| CSS3 |
|
|
|
|
| ||||||||||||||||||||||||||||||||
Weiterführende Informationen zu animation-delay:
- W3C Spezifikation:
http://www.w3.org/TR/css3-animations/#animation-delay
- letzte CSS-Eigenschaft (Acc-Key: ALT + SHIFT + z):
animation - nächste CSS-Eigenschaft (Acc-Key: ALT + SHIFT + w):
animation-direction
Beispiele
HTML:
<div id="example-1" class="examples">
<img src="img/ball-blau.png" alt="Blaue Kugel">
</div>CSS:
/* Der schwarze Rahmen für die Box und die Animation an sich werden mit den folgenden Zeilen definiert.
Diese wirken auf alle folgende Beispiele. */
div {
border: 4px solid black;
width: 300px;
}
/* Über die Keyframe-Regel wird die eigentliche Animation definiert. */
@-webkit-keyframes move-ball {
from {
left: 0px;
}
50% {
left: 200px;
}
to {
left: 0px;
}
}
@keyframes move-ball {
from {
left: 0px;
}
50% {
left: 200px;
}
to {
left: 0px;
}
}
/* Über den "identifier" (hier "move-ball") und die CSS-Eigenschaft animation-name (bzw. -webkit-animation-name für die Webkit-Browser) wird die Animation zugewiesen.
Für die Beispiele auf dieser Seite wird die Wiederholung (animation-iteration-count) auf 3 und eine Länge (animation-duration) auf 5 Sekunden festgelegt. */
div.examples img {
position: relative;
-webkit-animation-name: move-ball;
animation-name: move-ball;
-webkit-animation-iteration-count: 3;
animation-iteration-count: 3;
-webkit-animation-duration: 5s;
animation-duration: 5s;
}
/* Hier wird die Startverzögerung der Animation auf 2 Sekunden gesetzt. Safari und Chrome benötigt das Vendor-Präfix -webkit-, damit animation-delay (sowie alle CSS-Eigenschaftenn aus dem Modul "Animation") unterstützt wird. */
#example-1 img {
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
Beispiel Nr. 1 So sieht's aus:
HTML:
<div id="example-2" class="examples">
<img src="img/ball-blau.png" alt="Blaue Kugel">
</div>CSS:
#example-2 img {
-webkit-animation-delay: 2000ms;
animation-delay: 2000ms;
}
/* In diesem Beispiel wird die alternative Schreibweise mit der Einheit "ms" (Millisekunden) verwendet. */Beispiel Nr. 2 So sieht's aus:
HTML:
<div id="example-3" class="examples">
<img src="img/ball-blau.png" alt="Blaue Kugel">
</div>CSS:
#example-3 img {
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
/* Eine Animation mit einem 0-Wert für animation-delay startet sofort.
0 entspricht dem Standardwert und greift, falls animation-delay nicht ausdrücklich definiert ist. */Beispiel Nr. 3 So sieht's aus:
HTML:
<div id="example-4" class="examples">
<img src="img/ball-blau.png" alt="Blaue Kugel">
</div>CSS:
#example-4 img {
-webkit-animation-delay: -2.5s;
animation-delay: -2.5s;
}
/* Für animation-delay sind auch negative Werte zulässig.
In diesem Fall gilt animation-delay als "Offset", sprich: die Animation startet an bzw. "springt" an die Stelle,
welche die Animation nach der Zeit von animation-delay bereits erreicht hätte. */Beispiel Nr. 4 So sieht's aus:
HTML:
<div id="example-5" class="examples">
<img src="img/ball-blau.png" alt="Blaue Kugel">
</div>CSS:
@-webkit-keyframes addmargin {
from {
margin-top: 0px;
}
50% {
margin-top: 150px;
}
to {
margin-top: 0px;
}
}
@keyframes addmargin {
from {
margin-top: 0px;
}
50% {
margin-top: 150px;
}
to {
margin-top: 0px;
}
}
/* In diesem Beispiel wird eine zweite Animation definiert.
Über animation-name und die beiden Identifier "move-ball" und "addmargin" (getrennt durch ein Komma) werden beide Animationen dem blauen Ball zugewiesen. */
#example-5 img {
-webkit-animation-name: move-ball, addmargin;
animation-name: move-ball, addmargin;
-webkit-animation-delay: 1s, 6s;
animation-delay: 1s, 6s;
}
/* Für beide Animationen wird eine individuelle Startverzögerung definiert. Auch hier sind die Werte durch ein Komma getrennt.
Die erste Animation (das Pendeln von links nach rechts) startet nach 1 Sekunde, die zweite (Abstand nach oben) beginnt nach 6 Sekunden.
Also dann, wenn die erste Animation (Verzögerung von 1 Sekunde und Dauer von 5 Sekunden) einmal durchlaufen ist.
Da beide Animationen auf 3 Wiederholungen gesetzt sind, läuft die zweite Animation am Ende einmal alleine. */Beispiel Nr. 5 So sieht's aus:
HTML:
<div id="testcase-vendor">
<img src="img/ball.png" alt="Rote Kugel">
</div>CSS:
@-webkit-keyframes allmargin {
from {
margin: 0px;
}
50% {
margin: 100px;
}
to {
margin: 0px;
}
}
#testcase-vendor img {
-webkit-animation-name: allmargin;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 10s;
-webkit-animation-delay: 2s;
}Testbeispiel: Schreibweise mit
Vendor-Präfix
HTML:
<div id="testcase-standard">
<img src="img/ball.png" alt="Rote Kugel">
</div>CSS:
@keyframes allmargin {
from {
margin: 0px;
}
50% {
margin: 100px;
}
to {
margin: 0px;
}
}
#testcase-standard img {
animation-name: allmargin;
animation-iteration-count: infinite;
animation-duration: 10s;
animation-delay: 2s;
}Testbeispiel: Standardschreibweise
Fehler melden
Diese Referenz ist ein Freizeitprojekt ohne aufwendiges Lektorat oder Vergleichbarem. Von daher lassen sich bei dem Umfang dieser Referenz trotzt größtmöglicher Sorgfalt Fehler nicht vermeiden.
Hilf, die Qualität dieser Seite zu verbessern! Sollte Dir ein Fehler auffallen, sei es in den Erklärungen, Beispielen oder den Informationen zum Browsersupport, seien es orthographische oder grammatikalische, sende eine kurze E-Mail an info@css-wiki.com. Auch Anregungen und Verbesserungsvorschläge sind jeder Zeit Willkommen. Jede E-Mail wird persönlich beantwortet!
Vielen Dank!