CSS Easing Generator
Kostenloser Online-CSS-Easing-Generator. Ziehen Sie die cubic-bezier-Kontrollpunkte auf einer interaktiven Kurve, wählen Sie aus 18 Vorlagen, sehen Sie eine Ball-Loop-Animation und kopieren Sie die Timing-Funktion sofort.
Was ist eine Easing-Funktion in CSS?
Eine Easing-Funktion steuert, wie schnell eine Animation oder ein Transition im Zeitverlauf fortschreitet. Ein Element muss sich nicht konstant schnell bewegen: Es kann langsam starten, beschleunigen, das Ziel überschießen und sich einpendeln. In CSS stellt man sie über transition-timing-function oder animation-timing-function ein.
Was bedeuten die vier Zahlen in cubic-bezier()?
cubic-bezier(x1, y1, x2, y2) definiert eine Kurve über zwei Kontrollpunkte. Der erste formt den Beginn der Bewegung, der zweite das Ende. X steht für die Zeit auf einer Skala von 0 bis 1, Y für den Fortschritt: 0 ist der Startwert, 1 der Endwert.
Warum darf Y außerhalb von 0 bis 1 liegen, X aber nicht?
X wird auf die reale Zeit abgebildet; ein Wert unter 0 oder über 1 würde die Kausalität brechen und ist in der Spezifikation verboten. Y ist frei: Über 1 schießt das Element über das Ziel hinaus, unter 0 zieht es erst zurück — so entsteht der Nachhall der Back-Vorlagen.
Was ist der Unterschied zwischen ease, ease-in und ease-out?
ease ist der Browser-Standard mit sanftem Start und weicher Landung, ease-in startet langsam und endet schnell, ease-out startet schnell und bremst, ease-in-out verbindet beides. Der Generator enthält dazu Sine-, Quad-, Cubic-, Quart-, Expo-, Back- und Material-Vorlagen — insgesamt 18.
Wie funktioniert die Ball-Vorschau?
Zwei Bälle laufen für die eingestellte Dauer im Loop. Der obere Ball bewegt sich immer linear als Referenz, der untere folgt Ihrer Kurve. Der wachsende und schrumpfende Abstand zeigt genau, was Ihr Easing verändert.
Wo füge ich den erzeugten Wert ein?
Verwenden Sie ihn als Wert für transition-timing-function oder animation-timing-function, z. B. transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);. Das Tool gibt die pure Funktion cubic-bezier(...) aus, bereit für jede Regel.
Beeinflusst die Easing-Funktion die Animationsleistung?
Die Timing-Funktion selbst kostet nichts — sie bildet nur den Fortschritt auf die Zeit ab. Die Leistung hängt davon ab, welche Eigenschaften Sie animieren: transform und opacity sind GPU-freundlich, während Layouteigenschaften wie width oder top unabhängig vom Easing teure Reflows auslösen.
Kann ich einen echten Bounce- oder Elastik-Effekt erzeugen?
Ein einzelner cubic-bezier kann einmal überschießen, aber nicht die mehrfachen Aufsprünge eines echten Bounce- oder Elastik-Easings erzeugen. Dafür verketten Sie mehrere Keyframes in @keyframes oder nutzen die Web Animations API; das einmalige weiche Überschießen ist genau die Stärke von cubic-bezier und dieses Tools.
Wird etwas von dem, was ich hier mache, hochgeladen?
Nein. Die Kurve wird auf einem lokalen Canvas gezeichnet und die Vorschauanimation läuft vollständig in Ihrem Browser. Nichts wird an einen Server übertragen; der Generator funktioniert nach dem Laden also auch offline.
So verwenden Sie CSS Easing Generator
Formen Sie CSS-Easing-Kurven visuell, statt Zahlen zu raten. Ziehen Sie die Kontrollpunkte, vergleichen Sie Ihre Bewegung mit einer linearen Referenz und kopieren Sie die fertige cubic-bezier mit einem Klick. Alles läuft lokal im Browser.
- Wählen Sie einen der 18 Presets wie Ease Out, Expo Out oder Back Out als Ausgangspunkt.
- Ziehen Sie die beiden Griffe an der Kurve: Die X-Achse ist die Zeit und muss zwischen 0 und 1 bleiben, die Y-Achse ist der Fortschritt und darf überschießen.
- Feinjustieren Sie die exakten P1- und P2-Koordinaten über die Zahleneingaben, wenn Sie Präzision brauchen.
- Stellen Sie den Dauer-Schieberegler ein und beobachten Sie die beiden loopenden Bälle — die hohle ist immer linear, die volle nutzt Ihre Kurve.
- Kopieren Sie den erzeugten cubic-bezier-Wert in transition-timing-function oder animation-timing-function.
Schieben Sie einen Y-Griff über 1 für einen sicheren Überschwang, etwa cubic-bezier(0.34, 1.56, 0.64, 1) — das lässt Buttons und Kartenfedrig wirken, ganz ohne Keyframes.
Verwandte Tools
- CSS-Gradient-Generator Erstellen Sie visuell atemberaubende CSS-Gradienten. Generieren Sie lineare, radiale und konische Gradienten mit mehreren Farbstops, Winkeln und Positionen. Kopieren Sie produktionsreifen CSS-Code sofort.
- CSS-Loader-Generator Kostenloser CSS-Loader-Generator: zehn Ladeanimationen in reinem CSS mit Live-Reglern für Größe, Geschwindigkeit, Dicke und Farbe sowie kopierfertigem HTML und CSS.
- Border Radius Generator Kostenloser Online Border-Radius-Generator. Ziehen Sie 8 Griffe oder wählen Sie eine Blob-Vorlage, um organische CSS-Formen zu erstellen und den Code sofort zu kopieren.
- Farbkonverter Kostenloser Online-Farbkonverter. Konvertieren Sie HEX, RGB, HSL, HSV Formate sofort mit visueller Farbauswahl. 100% privat, läuft in Ihrem Browser.
- CSS Text-Shadow-Generator Kostenloser Online-Text-Shadow-Generator. Stapeln Sie mehrere Schattenebenen mit Versatz, Unschärfe, Farbe und Deckkraft, testen Sie Vorlagen wie Neon, 3D oder Retro und kopieren Sie das CSS sofort.
- CSS Clip-Path Generator Kostenloser Online-CSS-Clip-Path-Generator. Gestalten Sie Polygon-, Kreis-, Ellipsen- und Inset-Formen mit verschiebbaren Punkten, Live-Vorschau und Codekopieren mit einem Klick.
- CSS Beautifier CSS-Code sofort formatieren und verschönern. Minifiziertes CSS in lesbaren, gut eingerückten Code umwandeln mit anpassbaren Optionen.
- CSS Minifier Kostenloser Online-CSS-Minifier. Komprimieren und optimieren Sie CSS-Code sofort durch Entfernen von Leerzeichen, Kommentaren und unnötigen Zeichen. Reduzieren Sie die Dateigröße für schnellere Webperformance.