Übersicht

Die animation-delay CSS Eigenschaft gibt an, wann eine Animation starten soll. Dies lässt die Animationssequenz einige Zeit später starten nachdem sie einem Element zugewiesen wurde.

Ein Wert von 0s, welcher der Standardwert für die Eigenschaft ist, gibt an, dass die Animation starten soll sobald sie zugewiesen wird. Andernfalls legt der Wert eine Verzögerung von dem Moment fest, an dem die Animation dem Element zugewiesen wird; die Animation startet um diesen Wert verzögert nachdem sie zugewiesen wurde.

Falls ein negativer Wert für die Animationsverzögerung zugewiesen wird,  wird die Animation sofort ausgeführt. Jedoch wird sie so dargestellt, als ob sie vor dem Animationszyklus begonnen hat. Zum Beispiel, wenn Sie -1s als die Animationsverzögerungszeit angeben, wird die Animation sofort starten, allerdings 1 Sekunde innerhalb der Animationssequenz.

Falls Sie einen negativen Wert für die Animationsverzögerung angeben, der Startwert jedoch implizit ist, wird der Moment, an dem die Animation dem Element zugewiesen wird, als Startwert verwendet.

Es ist oft einfacher, die Kurzform Eigenschaft animation zu verwenden, um alle Animationseigenschaften auf einmal zu setzen.

Initialwert0s
Anwendbar aufalle Elemente, ::before und ::after Pseudoelemente
VererbtNein
Medienvisuell
Berechneter Wertwie angegeben
Animationstypdiskret
Kanonische Reihenfolgedie eindeutige Reihenfolge definiert durch die formale Grammatik

Syntax

<time>#
animation-delay: 3s
animation-delay: 2s, 4ms

Werte

<time>
Der Zeitversatz von dem Zeitpunkt, an dem die Animation dem Element zugewiesen wird, nach dem die Animation starten soll. Dieser kann entweder in Sekunden angegeben werden (mittels s als Einheit) oder in Millisekunden (mittels ms als Einheit). Falls keine Einheit angegeben wird, ist der Ausdruck ungültig.

Beispiele

Siehe CSS Animationen für Beispiele.

Spezifikation

Spezifikation Status Kommentar
CSS Animations
Die Definition von 'animation-delay' in dieser Spezifikation.
Arbeitsentwurf  

Browser-Kompatibilität

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidEdge MobileFirefox für AndroidOpera für AndroidiOS SafariSamsung Internet
Grundlegende UnterstützungChrome Vollständige Unterstützung 43
Vollständige Unterstützung 43
Vollständige Unterstützung Ja
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 16
Hinweise
Vollständige Unterstützung 16
Hinweise
Hinweise Before Firefox 57, Firefox does not repaint elements outside the viewport that are animated into the viewport with a delay. This bug affects only some platforms, such as Windows.
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 Vollständige Unterstützung 10Opera 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 Ja
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Chrome Android ? Edge Mobile Vollständige Unterstützung Ja
Vollständige Unterstützung Ja
Vollständige Unterstützung Ja
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 15
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 Ja
Vollständige Unterstützung Ja
Vollständige Unterstützung Ja
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Samsung Internet Android ?

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Kompatibilität unbekannt  
Kompatibilität unbekannt
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.

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

Mitwirkende an dieser Seite: SJW, beachespecially, teoli, Sebastianz
Zuletzt aktualisiert von: SJW,