CSS-Eigenschaft: animation-duration, Kategorien: Animierte Inhalte (allgemein), Animations (CSS 3)
Dauer einer Animation
Bestimmt die Dauer bzw. Länge einer Animation.
| Kurzbeschreibung | Werte | Standardwert | Kategorie | Hinweis |
|---|---|---|---|---|
| Dauer einer Animation |
| 0 |
| Neu in CSS 3 |
Verwandte Eigenschaften aus der Kategorie: Animierte Inhalte (allgemein), Animations (CSS 3):
- animation
- animation-delay
- animation-direction
- Aktuelle Seite: 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-duration zu beachten:
animation-duration steuert die Dauer 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 wird in der angegebenen Zeit einmal durchlaufen.
Bei einer animation-duration von 0s wird keine Animation dargestellt.
Negative Zeitwerte sind ohne Auswirkung. Diese werden als 0s interpretiert.
Animationen und animation-duration 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-duration:
- W3C Spezifikation:
http://www.w3.org/TR/css3-animations/#animation-duration
- letzte CSS-Eigenschaft (Acc-Key: ALT + SHIFT + z):
animation-direction - nächste CSS-Eigenschaft (Acc-Key: ALT + SHIFT + w):
animation-fill-mode
Beispiele
HTML:
<div id="example-1">
<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 der Animation per infinite auf endlos gestellt. */
div img {
position: relative;
-webkit-animation-name: move-ball;
animation-name: move-ball;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
/* Hier wird die Dauer der Animation auf 5 Sekunden gesetzt. Safari und Chrome benötigen das Vendor-Präfix -webkit-, damit animation-duration (sowie alle CSS-Eigenschaftenn aus dem Modul "Animation") unterstützt wird. */
#example-1 img {
-webkit-animation-duration: 5s;
animation-duration: 5s;
}
Beispiel Nr. 1 So sieht's aus:
HTML:
<div id="example-2">
<img src="img/ball-blau.png" alt="Blaue Kugel">
</div>CSS:
#example-2 img {
-webkit-animation-duration: 20s;
animation-duration: 20s;
}
/* Langsame Animation mit 20 Sekunden. */Beispiel Nr. 2 So sieht's aus:
HTML:
<div id="example-3">
<img src="img/ball-blau.png" alt="Blaue Kugel">
</div>CSS:
#example-3 img {
-webkit-animation-duration: 2000ms;
animation-duration: 2000ms;
}
/* Neben s für Sekunden ist die Angabe von ms für Millisekunden möglich. 2000ms entsprechen 2 Sekunden. */Beispiel Nr. 3 So sieht's aus:
HTML:
<div id="example-4">
<img src="img/ball-blau.png" alt="Blaue Kugel">
</div>CSS:
#example-4 img {
-webkit-animation-duration: 0s;
animation-duration: 0s;
}
/* Eine Animation mit 0 Sekunden (Standardwert) führt zu keiner Animation. */Beispiel Nr. 4 So sieht's aus:
HTML:
<div id="example-5">
<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-duration: 6s, 20s;
animation-duration: 6s, 20s;
}
/* Für beide Animationen wird eine individuelle Dauer definiert. Auch hier sind die Werte durch ein Komma getrennt.
Die erste Animation (das Pendeln von links nach rechts) läuft damit in 6 Sekunden ab, die zweite (Abstand nach oben) läuft über 20 Sekunden. */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: 5s;
}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: 5s;
}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!