CSS/Funktionen/cubic-bezier()

Browserunterstützung
caniuse.com

Die CSS-Funktion cubic-bezier() erzeugt einen sanften Übergang mithilfe einer kubischen Bézier-Kurve. Als <easing-function> kann sie verwendet werden, um den Anfang und das Ende der Interpolation zu glätten.

anwendbar auf

transition-timing-function
animation-timing-function

Parameter

vier Parameter, die die Koordinaten von zwei Kontrollpunkten darstellen:

<x1>

Eine <Zahl>, die die x-Achsen-Koordinate des ersten Kontrollpunkts darstellt. Sie muss im Bereich [0, 1] liegen.

<y1>

Eine <Zahl>, die die y-Achsen-Koordinate des ersten Kontrollpunkts darstellt.

<x2>

Eine <Zahl>, die die x-Achsenkoordinate des zweiten Kontrollpunkts darstellt. Sie muss im Bereich [0, 1] liegen.

<y2>

Eine <Zahl>, die die y-Achsenkoordinate des zweiten Kontrollpunkts darstellt.

Beispiel

.formula-1 .ease {
	animation-timing-function: cubic-bezier(0.33,0.1,0.33,1);
}

Anstelle des Standardwerts ease, der cubic-bezier(0.25,0.1,0.25,1) entspricht, werden hier die Werte leicht verändert.

Siehe auch

• CSS-Animation
  • animation-timing-function

Weblinks

• W3C: Attribute References: the cubic-bezier() function
• MDN: cubic-bezier()
• Browser-Support: caniuse.com