animation-duration

Übersicht

Die animation-duration CSS Eigenschaft bestimmt die Ablaufdauer einer Animation.

Der Standartwert ist 0s, somit wird keine Animation ausgeführt.

Anstelle von animation-duration kann auch die Kurzschreibweise animation verwendet werden.

Initialwert	`0s`
Anwendbar auf	alle Elemente, `::before` und `::after` Pseudoelemente
Vererbt	Nein
Berechneter Wert	wie angegeben
Animationstyp	diskret

Syntax

animation-duration: 6s;
animation-duration: 120ms;
animation-duration: 1s, 15s;
animation-duration: 10s, 30s, 230ms;

Werte

<time>: Die Ablaufdauer der Animation wird in Sekunden (s) oder Millisekunden (ms) angegeben. Ohne Angabe einer Masseinheit ist der Wert ungültig. Negative Werte sind nicht zulässig.

Hinweis: Einige ältere Implementierungen mit Präfix interpretieren negative Werte als 0s.

Formale Syntax

<time>#

Beispiele

Siehe CSS animations

Spezifikation

Spezifikation	Status	Anmerkung
CSS Animations Die Definition von 'animation-duration' in dieser Spezifikation.	Arbeitsentwurf	Ursprüngliche Definition

Browser Kompatibilität

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android Webview	Chrome für Android	Firefox für Android	Opera für Android	Safari auf iOS	Samsung Internet
`animation-duration`	Chrome Vollständige Unterstützung 43 Vollständige Unterstützung 43 Vollständige Unterstützung 3 Mit Präfix Mit Präfix Benötigt das Herstellerpräfix: -webkit-	Edge Vollständige Unterstützung 12 Vollständige Unterstützung 12 Vollständige Unterstützung 12 Mit Präfix Mit Präfix Benötigt das Herstellerpräfix: -webkit-	Firefox Vollständige Unterstützung 16 Vollständige Unterstützung 16 Vollständige Unterstützung 49 Mit Präfix Mit Präfix Benötigt das Herstellerpräfix: -webkit- Vollständige Unterstützung 44 Mit Präfix Deaktiviert Mit Präfix Benötigt das Herstellerpräfix: -webkit- Deaktiviert From version 44: this feature is behind the `layout.css.prefixes.webkit` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config. Vollständige Unterstützung 5 Mit Präfix Mit Präfix Benötigt das Herstellerpräfix: -moz-	IE Teilweise Unterstützung 10 Hinweise Teilweise Unterstützung 10 Hinweise Hinweise Once the element has loaded, changing the value of this property has no effect.	Opera Vollständige Unterstützung 30 Vollständige Unterstützung 30 Vollständige Unterstützung 15 Mit Präfix Mit Präfix Benötigt das Herstellerpräfix: -webkit- Keine Unterstützung 12.1 — 15 Keine Unterstützung 12 — 15 Mit Präfix Mit Präfix Benötigt das Herstellerpräfix: -o-	Safari Vollständige Unterstützung 9 Vollständige Unterstützung 9 Vollständige Unterstützung 4 Mit Präfix Mit Präfix Benötigt das Herstellerpräfix: -webkit-	WebView Android Vollständige Unterstützung 43 Vollständige Unterstützung 43 Vollständige Unterstützung 2 Mit Präfix Mit Präfix Benötigt das Herstellerpräfix: -webkit-	Chrome Android Vollständige Unterstützung 43 Vollständige Unterstützung 43 Vollständige Unterstützung 18 Mit Präfix Mit Präfix Benötigt das Herstellerpräfix: -webkit-	Firefox Android Vollständige Unterstützung 16 Vollständige Unterstützung 16 Vollständige Unterstützung 49 Mit Präfix Mit Präfix Benötigt das Herstellerpräfix: -webkit- Vollständige Unterstützung 44 Mit Präfix Deaktiviert Mit Präfix Benötigt das Herstellerpräfix: -webkit- Deaktiviert From version 44: this feature is behind the `layout.css.prefixes.webkit` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config. Vollständige Unterstützung 5 Mit Präfix Mit Präfix Benötigt das Herstellerpräfix: -moz-	Opera Android Vollständige Unterstützung 30 Vollständige Unterstützung 30 Vollständige Unterstützung 14 Mit Präfix Mit Präfix Benötigt das Herstellerpräfix: -webkit- Keine Unterstützung 12.1 — 14 Keine Unterstützung 12 — 14 Mit Präfix Mit Präfix Benötigt das Herstellerpräfix: -o-	Safari iOS Vollständige Unterstützung 9 Vollständige Unterstützung 9 Vollständige Unterstützung 4.2 Mit Präfix Mit Präfix Benötigt das Herstellerpräfix: -webkit-	Samsung Internet Android Vollständige Unterstützung 4.0 Vollständige Unterstützung 4.0 Vollständige Unterstützung 1.0 Mit Präfix Mit Präfix Benötigt das Herstellerpräfix: -webkit-

Legende

Vollständige Unterstützung: Vollständige Unterstützung
Teilweise Unterstützung: Teilweise Unterstützung
Siehe Implementierungshinweise.: Siehe Implementierungshinweise.
Benutzer muss dieses Feature explizit aktivieren.: Benutzer muss dieses Feature explizit aktivieren.
Benötigt ein Herstellerpräfix oder einen anderen Namen zur Verwendung.: Benötigt ein Herstellerpräfix oder einen anderen Namen zur Verwendung.