Easing Function Visualizer
Visualisieren, vergleichen und generieren Sie CSS-Beschleunigungsfunktionen mit einem interaktiven SVG-Kubik-Bezier-Kurveneditor. Ziehen Sie die beiden Kontrollpunkte (P1, P2) auf der Kurve, um Ihre eigene benutzerdefinierte Beschleunigung zu erstellen – oder wählen Sie aus über 18 integrierten Voreinstellungen, darunter Beschleunigung, Sprungkraft, elastisch, zurück und die betonte Kurve von Material Design. Vergleichen Sie bis zu 6 Beschleunigungskurven nebeneinander in der Vergleichsüberlagerung, zeigen Sie eine Vorschau der Bewegung mit einem animierten Punkt an und kopieren Sie das produktionsbereite CSS für Übergangs- und Animationseigenschaften. Die gesamte Verarbeitung erfolgt lokal in Ihrem Browser – völlig kostenlos, keine Anmeldung erforderlich.
Control Points
transition: all 0.4s ease;
animation: myAnim 0.4s ease;
Über CSS-Easing-Funktionen
- CSS-Beschleunigungsfunktionen steuern die Änderungsrate während einer Animation oder eines Übergangs. Anstelle einer langweiligen Animation mit konstanter Geschwindigkeit sorgt die Beschleunigung dafür, dass sich Bewegungen natürlich anfühlen – beschleunigen, verlangsamen, hüpfen oder überschießen. Der gebräuchlichste Typ ist „Cubic-Bezier()“, der durch zwei Kontrollpunkte (P1, P2) definiert wird, die die Kurve vom Anfang (0,0) bis zum Ende (1,1) formen.
- Mit dem interaktiven SVG-Editor können Sie zwei Kontrollpunkte auf einem Koordinatengitter ziehen. Die X-Achse stellt die Zeit dar (0 % bis 100 % der Animationsdauer) und die Y-Achse den Fortschritt (0 % bis 100 % der Eigenschaftsänderung). Die Kurvenform zwischen diesen Punkten bestimmt die Entspannung: steile Abschnitte bedeuten schnelle Veränderung, flache Abschnitte bedeuten langsame Veränderung.
- P1 (erster Griff) steuert die Anfangsbeschleunigung; P2 (zweiter Griff) steuert die Endverzögerung. P1 unten rechts erzeugt einen langsamen Start, der beschleunigt. P2 oben rechts sorgt für einen schnellen Start, der langsamer wird. Werte außerhalb des Bereichs 0-1 (wie y1=-0,5) erzeugen Überschwingeffekte wie Springen oder Springen.
- Beschleunigung, Dauer und Verzögerung sind unabhängige Animationseigenschaften. Die Dauer steuert, wie lange die Animation läuft. Die Verzögerung steuert den Start. Die Beschleunigung steuert das Tempo der Bewegung innerhalb dieser Dauer. Eine schnelle Dauer mit dramatischer Entspannung erzeugt eine flotte, lebendige Bewegung. Eine langsame Dauer mit sanfter Entspannung sorgt für sanfte, elegante Übergänge.
Häufig gestellte Fragen
Eine CSS-Beschleunigungsfunktion definiert die Änderungsrate einer Eigenschaft im Laufe der Zeit während einer Animation oder eines Übergangs. Anstatt sich mit konstanter Geschwindigkeit zu bewegen, ermöglicht die Beschleunigung, dass die Animation beschleunigt, verlangsamt, abprallt oder überschießt. Der gebräuchlichste Typ ist „Cubic-Bezier()“, definiert durch vier Werte, die zwei Kontrollpunkte darstellen, die die Beschleunigungskurve formen.
Eine Kubik-Bezier-Kurve hat vier Parameter: x1, y1, x2, y2. P1 (x1, y1) steuert, wie die Animation startet – es bestimmt die Anfangsbeschleunigung. P2 (x2, y2) steuert, wie die Animation endet – es bestimmt die endgültige Verzögerung. Beide Punkte liegen auf einem Koordinatengitter, wobei X = Zeit (0 bis 1) und Y = Fortschritt (0 bis 1) ist.
Wenn der Y-Wert eines Kontrollpunkts unter 0 oder über 1 fällt, schießt die Kurve über das Ziel hinaus, was bedeutet, dass die animierte Eigenschaft vorübergehend über ihren endgültigen Wert hinausgeht. Dadurch entstehen Sprung- und Federeffekte. Zum Beispiel geht Back In zunächst leicht rückwärts, bevor es vorwärts geht.
Ease-in startet langsam und beschleunigt sich – gut für Elemente, die auf den Bildschirm gelangen. Ease-Out startet schnell und verlangsamt sich – gut für Elemente, die den Bildschirm verlassen. Ease vereint beides: einen sanften Anfang und ein sanftes Ende mit einem schnelleren Mittelteil.
Verwenden Sie die Funktion „Cubic-Bezier()“ in Ihrer Übergangs- oder Animationseigenschaft: Transition: opacity 0.3s Cubic-Bezier(0.25, 0.1, 0.25, 1);. Die vier Werte sind x1, y1, x2, y2. Sie können die Kontrollpunkte in diesem Werkzeug ziehen, um die perfekte Kurve zu finden und den resultierenden CSS-Wert zu kopieren.
Für die meisten UI-Interaktionen (Hover-Zustände, Modalitäten, Tooltips) wird Ease-Out empfohlen – Objekte, die schnell starten und langsamer werden, wirken reaktionsschnell und natürlich. Für Eingangsanimationen verwenden Sie „Ease-in-out“ oder die „Material Design“-betonte Kurve. Vermeiden Sie eine lineare Benutzeroberfläche – sie fühlt sich roboterhaft an.
Ja. Verwenden Sie beliebige Werte: transit-[cubic-bezier(0.68,-0.55,0.27,1.55)] oder fügen Sie benutzerdefinierte Easings zu Ihrer tailwind.config.js unter theme.extend.transitionTimingFunction hinzu.
Ja – Kubikbezier() und Schlüsselwort-Easings (ease,Easy-in, Ease-out, Ease-in-out, linear) werden in allen modernen Browsern unterstützt. Steps() wird auch in Chrome, Firefox, Safari und Edge weitgehend unterstützt.