CSS-Werkzeuge/Easing-Funktions-Editor
Easing-Funktions-Editor
Entwerfen Sie benutzerdefinierte Cubic-Bezier-Easing-Funktionen für flüssige Animationen
Kurven-Editor
Kontrollpunkte ziehen, um die Kurve anzupassen
Steuerung
1s
Animations-Vorschau
Presets
CSS-Code
Loading...Easing-Generator Anleitung
Erstellen Sie benutzerdefinierte Timing-Funktionen für flüssige Animationen
Was ist Easing?
Easing-Funktionen steuern die Geschwindigkeit von Animationen über die Zeit. Sie machen Bewegungen natürlicher, indem sie Beschleunigung und Verlangsamung simulieren statt konstanter Geschwindigkeit.
Verwendung
- Wählen Sie einen Easing-Typ oder erstellen Sie eine benutzerdefinierte Kurve
- Ziehen Sie Kontrollpunkte, um die Kurve zu formen
- Vorschau der Animation mit verschiedenen Dauern
- Kopieren Sie den cubic-bezier-Wert für CSS
Profi-Tipps
- Ease-out funktioniert gut für Eingangsanimationen
- Ease-in eignet sich für Ausgangsanimationen
- Benutzerdefinierte Kurven können Bounce-Effekte erzeugen
Browser-Unterstützung
Cubic-bezier-Funktionen werden in allen modernen Browsern unterstützt. Sie funktionieren mit CSS-Transitions und Animationen.
Häufig gestellte Fragen
Was bedeuten die vier Werte in cubic-bezier?
In cubic-bezier(x1, y1, x2, y2) sind x1, y1 der erste Kontrollpunkt und x2, y2 der zweite. X-Werte müssen zwischen 0 und 1 liegen (Zeit), Y-Werte können darüber hinausgehen (Overshoot-Effekt). Der Startpunkt (0,0) und Endpunkt (1,1) sind fest.
Was ist der Unterschied zwischen ease, ease-in und ease-out?
ease hat einen sanften Start und Ende mit schneller Mitte. ease-in startet langsam und wird schneller (Beschleunigung). ease-out startet schnell und wird langsamer (Verzögerung). ease-in-out ist an beiden Enden langsam. Für UI-Animationen wird hauptsächlich ease-out verwendet.
Wie erstelle ich einen Overshoot (elastischen) Effekt?
Verwenden Sie cubic-bezier mit Y-Werten kleiner als 0 oder größer als 1. Beispiel: cubic-bezier(0.68, -0.55, 0.27, 1.55) erzeugt einen elastischen Effekt, der am Anfang und Ende über das Ziel hinausschießt. Solche Effekte verleihen Button-Klicks oder Modal-Erscheinungen Lebendigkeit.
Wann verwendet man die steps()-Funktion?
Die steps()-Funktion erzeugt schrittweise statt kontinuierliche Animationen. Sie eignet sich für Sprite-Animationen, Schreibmaschineneffekte, Uhrzeiger und andere diskrete Bewegungen. steps(5) teilt die Animation in 5 Schritte auf.
Welche Easing-Funktion sollte ich wählen?
Wenn Elemente erscheinen, verwenden Sie ease-out (schnelles Erscheinen, langsames Einrasten). Beim Verschwinden verwenden Sie ease-in (langsamer Start, schnelles Verschwinden). Für Bewegungsanimationen ist ease-in-out natürlich. Für Hintergrundfarben- oder Transparenzänderungen ist linear geeignet.