Der eigene Online-Shop für Profi-Fotografen. Für Fotografen, die keine Zeit zu verlieren haben.

CSS-Eigenschaft: animation-duration, Kategorien: Animierte Inhalte (allgemein), Animations (CSS 3)

Dauer einer Animation

Bestimmt die Dauer bzw. Länge einer Animation.

CSS-Eigenschaft: animation-duration
KurzbeschreibungWerteStandardwertKategorieHinweis
Dauer einer Animation
  • <time>
0
Allgemein:
Animierte Inhalte
CSS 3:
Animations
Neu in CSS 3
 

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.

Browserunterstützung von animation-duration
Firefox
Firefox
Google Chrome
Google
Chrome
Internet Explorer
Internet
Explorer
Safari
Safari
Opera
Opera
CSS3
Version: 16Version: 25Version: 30Version: 31Version: 32
j
Version: 20
-webkit-
Version: 8Version: 9Version: 10Version: 11
nj
Version: 4Version: 5Version: 6
-webkit-
Version: 10Version: 11Version: 12
nj

Weiterführende Informationen zu animation-duration:



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 nur für: FirefoxOperaInternet Explorer
W3C: 10
SafariGoogle Chrome

Beispiel Nr. 1 So sieht's aus:

Blaue Kugel
 

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 nur für: FirefoxOperaInternet Explorer
W3C: 10
SafariGoogle Chrome

Beispiel Nr. 2 So sieht's aus:

Blaue Kugel
 

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 nur für: FirefoxOperaInternet Explorer
W3C: 10
SafariGoogle Chrome

Beispiel Nr. 3 So sieht's aus:

Blaue Kugel
 

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 nur für: FirefoxOperaInternet Explorer
W3C: 10
SafariGoogle Chrome

Beispiel Nr. 4 So sieht's aus:

Blaue Kugel
 

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 nur für: FirefoxOperaInternet Explorer
W3C: 10
SafariGoogle Chrome

Beispiel Nr. 5 So sieht's aus:

Blaue Kugel
 

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;    
}
Beispiel nur für: SafariGoogle Chrome

Testbeispiel: Schreibweise mit
Vendor-Präfix

Rote Kugel
 

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;    
}
Beispiel nur für: FirefoxInternet Explorer
W3C: 10
Opera

Testbeispiel: Standardschreibweise

Rote Kugel
 

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!

A-Z:

Schnell­auswahl

Seiten:

Letzte Änderung: 16. 10. 2017
Render Time: 0.1 sec.

Browser-Marktanteile