Deutsch
Eigene CSS-Easing-Kurven mit Live-Animations-Vorschau zeichnen.
Zuletzt aktualisiert
.element {
transition: transform 1.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}Eine *Easing-Funktion* in CSS steuert, wie eine Animation während ihrer Dauer beschleunigt und abbremst. Die Keywords ease, ease-in, ease-out und ease-in-out sind Abkürzungen für vier feste Kurven. Für alles darüber hinaus gibt es cubic-bezier() - eine Funktion mit vier Zahlen, die eine eigene Kurve zeichnet.
Diese vier Zahlen sind die Koordinaten von zwei Kontrollpunkten (x1, y1, x2, y2). Per Hand sind sie unhandlich, weil kleine Änderungen große visuelle Effekte haben und Überschwinger *bouncy*-Bewegungen erzeugen, die man den Zahlen nicht ansieht. Ein visueller Editor lässt dich Handles ziehen und die Kurve reagieren sehen - viel schneller als Dezimalstellen zu tippen.
Coddys Editor zeichnet die Kurve live, animiert eine Vorschau-Kugel mit deinem Easing und bietet Presets für gängige Muster: die CSS-Keywords, die *Standard*-Kurve aus Material Design, ein bouncy-out und ein anticipate/overshoot. Den resultierenden cubic-bezier()-String kopieren und ins CSS einfügen - alles im Browser.
linear - konstanter Fortschritt pro Zeiteinheit.Wähle ein Preset nahe am gewünschten Gefühl. *Material Standard* und *Bouncy out* eignen sich gut für UI; *ease-out* ist der sichere Default für Entry-Animationen.
Die farbigen Kreise sind die Kontrollpunkte. Den ersten ziehen, um den *Start* zu tunen; den zweiten, um das *Ende* zu tunen. Über die obere Kante hinaus zu ziehen erzeugt Overshoot.
Wähle eine realistische Dauer. UI-Transitions 150–300ms; Emphasis-Bewegungen 400–600ms. *Replay* spielt die Vorschau erneut ab.
Für exakte Werte in die Felder X1/Y1/X2/Y2 tippen. Y kann unter 0 oder über 1 - X bleibt in 0..1.
*Kopieren* drücken, um die komplette transition-Regel zu erhalten. In dein Stylesheet einfügen und transform durch die zu animierende Eigenschaft ersetzen.
Übliche Easings und die cubic-bezier-Werte dahinter. Die vier Keywords sind Aliasnamen konkreter Kurven.
| Easing | cubic-bezier-Werte | Wann verwenden |
|---|---|---|
ease | (0.25, 0.1, 0.25, 1) | Default in transition - sanft, aber generisch |
linear | (0, 0, 1, 1) | Konstante Geschwindigkeit - meist falsch im UI, richtig für Spinner |
ease-in | (0.42, 0, 1, 1) | Langsamer Start, schnelles Ende - am besten für Exits |
ease-out | (0, 0, 0.58, 1) | Schneller Start, langsames Ende - am besten für Entries und Reaktionen |
ease-in-out | (0.42, 0, 0.58, 1) | Symmetrisch - gut für Hin-und-Her-Toggles |
| Material Standard | (0.4, 0, 0.2, 1) | Moderne, knackige UI-Bewegung |
| Bouncy out | (0.18, 0.89, 0.32, 1.28) | Schießt übers Ziel und schwingt aus - verspielte Entries |
.btn { transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1);}.btn:hover { transform: translateY(-2px);}Großteil der Bewegung passiert sofort, danach schwingt es aus - fühlt sich reaktiv auf den Cursor an, nicht träge.
.card { transition: transform 350ms cubic-bezier(0.18, 0.89, 0.32, 1.28);}Y2 = 1.28 lässt die Kurve übers Ziel hinausgehen und dann einpendeln. Sparsam einsetzen - bouncy wirkt schnell ermüdend, wenn sich alles so bewegt.
.hero { transition: transform 500ms cubic-bezier(0.68, -0.55, 0.27, 1.55);}Negatives Y1 lässt die Animation kurz in die *Gegenrichtung* gehen, bevor sie ihr Ziel ansteuert. Klassischer Animator-Trick - eine kleine Anticipation lässt die Hauptbewegung gewollt wirken.
ease-in für Entries verwenden. Startet langsam, endet schnell - das Gegenteil von reaktiv. Stattdessen ease-out.linear für UI wählen, weil es "neutral" wirkt. Konstante Geschwindigkeit sieht mechanisch aus; richtig für Fortschrittsbalken und Spinner, selten sonst.cubic-bezier()?cubic-bezier(x1, y1, x2, y2). Der erste Punkt formt den *Start*, der zweite das *Ende*. X bleibt zwischen 0 und 1 (Zeit); Y darf außerhalb von 0..1 sein (Fortschritt, für Overshoot/Anticipate).cubic-bezier(0.4, 0, 0.2, 1). Für Exits passt *ease-in*. *linear* nur für Fortschrittsanzeigen.ease und ease-out?ease startet ebenfalls weich. ease-out startet sofort mit voller Geschwindigkeit und bremst ab - diese *sofortige* Bewegung wirkt reaktiver als ease.cubic-bezier(0.18, 0.89, 0.32, 1.28) schießt ~28 % übers Ziel und schwingt zurück. Für mehrere Bounces brauchst du @keyframes oder eine Spring-Bibliothek - cubic-bezier kann nur einmal übers Ziel hinaus.@keyframes-Animationen kombinieren?animation-timing-function im Shorthand animation oder pro Keyframe. Bei mehrstufigen Bewegungen kannst du zwischen jeden Keyframe-Paaren ein anderes Easing setzen.