animation-timing-function

Ü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> (en-US).

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
Berechneter Wertwie angegeben
Animationstypdiskret

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> (en-US) Wert repräsentiert die Timingfunktion, die mit der dazugehörigen zu animierenden Eigenschaft verknüpft wird, die in animation-property definiert wird.

Formale Syntax

<easing-function>#

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

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

wobei
<step-position> = jump-start | jump-end | jump-none | jump-both | start | end

Beispiele

Siehe CSS Animationen für Beispiele

Spezifikationen

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

Browser Kompatibilität

BCD tables only load in the browser

Siehe auch