CSS-Easing-Generator
cubic-bezier-Kurven per Ziehen bearbeiten, Animation live ansehen und fertigen Easing-Wert für CSS und Tailwind kopieren.
Der CSS-Easing-Generator lässt dich cubic-bezier-Kurven per Ziehen bearbeiten und zeigt die Animation sofort live. Du verschiebst die zwei Kontrollpunkte im Diagramm oder stellst die Werte mit Reglern ein, wählst aus bekannten Vorlagen wie easeOutBack und kopierst den fertigen Wert für CSS, Tailwind oder JavaScript.
Vorschau
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
/* oder als Kurzform */
transition: transform 1000ms cubic-bezier(0.25, 0.1, 0.25, 1);Was ist eine Easing-Funktion?
Eine Easing-Funktion beschreibt, wie sich der Fortschritt einer Animation über die Zeit
verteilt. Linear bewegt sich alles gleichmäßig, was mechanisch wirkt. Natürliche Bewegungen
beschleunigen und bremsen. In CSS steuerst du das mit cubic-bezier(x1, y1, x2, y2).
Die eingebauten Schlüsselwörter
| Schlüsselwort | Wert | Wirkung |
|---|---|---|
| ease | cubic-bezier(0.25, 0.1, 0.25, 1) | Standard, sanfter Start und Ende |
| ease-in | cubic-bezier(0.42, 0, 1, 1) | Langsamer Start |
| ease-out | cubic-bezier(0, 0, 0.58, 1) | Sanftes Abbremsen |
| ease-in-out | cubic-bezier(0.42, 0, 0.58, 1) | Langsam hinein und heraus |
So gehst du vor
- Vorlage wählen und Kontrollpunkte ziehen.
- In der Vorschau prüfen, ob sich die Bewegung richtig anfühlt.
- Wert kopieren. Ganze Animationen mit Keyframes baust du im CSS-Animation-Generator.
Beispiel
Ein Menü, das von unten hereinfährt, wirkt mit cubic-bezier(0.16, 1, 0.3, 1) (easeOutExpo) lebendig: schneller Start, weiches Ausklingen. Hover-Effekte mit Schatten stimmst
du mit dem Box-Shadow-Generator ab.
Häufige Fragen
Was bedeuten die vier Zahlen bei cubic-bezier()?
Es sind die Koordinaten der beiden Kontrollpunkte einer Bézier-Kurve von (0,0) nach (1,1). x1 und y1 gehören zum ersten, x2 und y2 zum zweiten Punkt. Die x-Werte müssen zwischen 0 und 1 liegen, die y-Werte dürfen darüber und darunter gehen und erzeugen so ein Überschwingen.
Was ist der Unterschied zwischen ease-in und ease-out?
ease-in startet langsam und wird schneller, es passt zu Elementen, die den Bildschirm verlassen. ease-out startet schnell und bremst ab, ideal für Elemente, die erscheinen. ease-in-out kombiniert beides.
Wie bekomme ich einen federnden Effekt?
Setze y-Werte über 1 oder unter 0, zum Beispiel cubic-bezier(0.34, 1.56, 0.64, 1) für easeOutBack. Die Animation schießt kurz über das Ziel hinaus und schwingt zurück.
Welche Dauer ist für UI-Animationen sinnvoll?
Für kleine Interaktionen wie Hover und Buttons 100 bis 200 ms, für Menüs und Dialoge 200 bis 400 ms. Längere Animationen wirken schnell träge. Achte außerdem auf die Einstellung „Bewegung reduzieren“ und biete Nutzenden Ruhe an.
Stimmt etwas nicht auf dieser Seite? – wir schauen uns das an.