1Passen Sie die vier Kontrollpunktwerte (x1, y1, x2, y2) zwischen 0 und 1 an
2Oder klicken Sie auf eine Voreinstellung (ease, ease-in, ease-out, ease-in-out, linear)
3Stellen Sie die Animationsdauer mit dem Schieberegler ein
4Beobachten Sie die animierte Vorschau, um das Easing zu testen
5Kopieren Sie die CSS-Zeitfunktion und verwenden Sie sie in Übergängen oder Animationen
Häufig gestellte Fragen
cubic-bezier() ist eine CSS-Funktion, die eine benutzerdefinierte Easing-Kurve mit vier Kontrollpunkten definiert. Sie wird als Wert für transition-timing-function und animation-timing-function verwendet.
Die vier Werte definieren die zwei Kontrollpunkte P1(x1,y1) und P2(x2,y2) der Kurve. X-Werte müssen zwischen 0 und 1 liegen; Y-Werte können diesen Bereich überschreiten, um Vorwegnahme- oder Überschusseffekte zu erzeugen.
ease ist cubic-bezier(0.25,0.1,0.25,1), ease-in ist cubic-bezier(0.42,0,1,1), ease-out ist cubic-bezier(0,0,0.58,1), ease-in-out ist cubic-bezier(0.42,0,0.58,1) und linear ist cubic-bezier(0,0,1,1).
Ja. Verwenden Sie es als animation-timing-function in einer @keyframes-Animation oder als transition-timing-function in einem CSS-Übergang. Der Generator gibt die transition-timing-function-Deklaration aus.