Übersicht

Die animation-timing-function CSS Eigenschaft gibt an, wie eine CSS Animation über die Dauer eines Zyklus verlaufen soll. Die möglichen Werte sind eine oder mehrere <timing-function>.

Für Schlüsselbildanimationen wird die Timingfunktion zwischen den Schlüsselbildern angewandt, anstatt über die gesamte Animation. Mit anderen Worten, die Timingfunktion wird auf den Start des Schlüsselbildes und an dessen Ende angewandt.

Eine Animationstimingfunktion, die innerhalb eines Schlüsselbildblocks definiert wurde, wird auf dieses Schlüsselbild angewandt. Falls keine Timingfunktion für das Schlüsselbild angegeben wurde, wird die Timingfunktion verwendet, die für die gesamte Animation definiert wurde.

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

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

Syntax

/* Schlüsselwortwerte */
animation-timing-function: ease;
animation-timing-function: ease-in;
animation-timing-function: ease-out;
animation-timing-function: ease-in-out;
animation-timing-function: linear;
animation-timing-function: step-start;
animation-timing-function: step-end;

/* Funktionswerte */
animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
animation-timing-function: steps(4, end);

/* Mehrere Animationen */
animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);

/* Globale Werte */
animation-timing-function: inherited;
animation-timing-function: initial;
animation-timing-function: unset;

Werte

<timingfunction>
Jeder <timing-function> Wert repräsentiert die Timingfunktion, die mit der dazugehörigen zu animierenden Eigenschaft verknüpft wird, die in animation-property definiert wird.

Formale Syntax

<single-timing-function>#

wobei
<single-timing-function> = linear | <cubic-bezier-timing-function> | <step-timing-function> | <frames-timing-function>

wobei
<cubic-bezier-timing-function> = ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)
<step-timing-function> = step-start | step-end | steps(<integer>[, [ start | end ] ]?)
<frames-timing-function> = frames(<integer>)

Beispiele

Siehe CSS Animationen für Beispiele

Spezifikationen

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

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 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 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 Ja
Vollständige Unterstützung Ja
Vollständige Unterstützung 4
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
WebView Android 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-
Chrome 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-
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 Vollständige Unterstützung 4.0
Vollständige Unterstützung 4.0
Vollständige Unterstützung Ja
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
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, mrstork, Sebastianz, fscholz
Zuletzt aktualisiert von: SJW,