Ein Satz aus einem aktuellen Beitrag der Design-Engineerin Carmen Ansio bringt es auf den Punkt: Ein gezogener Griff im Pen-Tool genügt, um eine CSS-Easing-Kurve zu verstehen. Dahinter steckt mehr als eine nette Analogie, denn sie erklärt die alte cubic-bezier-Welt und die neue linear-Funktion gleichermaßen.
drweb.de als bevorzugte Quelle auf Google hinzufügenQualitätsgeprüfte Inhalte direkt in Google News & DiscoverJetzt hinzufügen
Warum ist eine Bézier-Kurve wie das Pen-Tool?
Die Funktion cubic-bezier() beschreibt eine Kurve über vier Kontrollpunkte. Fest sind Start bei (0,0) und Ende bei (1,1). Frei beweglich sind zwei Griffe, exakt wie die Anfasser im Pen-Tool einer Vektorsoftware.
Die Achsen tragen die Bedeutung. Die x-Achse steht für die verstrichene Zeit von 0 bis 1, die y-Achse für den Fortschritt des Werts. Je steiler die Kurve an einer Stelle, desto schneller die Änderung. So wird aus zwei Griffpositionen ein Geschwindigkeitsprofil.
Die vertrauten Schlüsselwörter sind nichts anderes als feste Bézier-Werte. Laut MDN entspricht ease exakt cubic-bezier(0.25, 0.1, 0.25, 1), und ease-in-out steht für cubic-bezier(0.42, 0, 0.58, 1).
Die CSS-Schlüsselwörter und ihre cubic-bezier-Entsprechungen laut MDN:
| Schlüsselwort | cubic-bezier-Wert |
|---|---|
| ease | 0.25, 0.1, 0.25, 1 |
| ease-in | 0.42, 0, 1, 1 |
| ease-out | 0, 0, 0.58, 1 |
| ease-in-out | 0.42, 0, 0.58, 1 |
Was kann cubic-bezier() nicht?
So flexibel die zwei Griffe sind, sie erzeugen nur eine monotone S-Kurve. Der Wert läuft von 0 nach 1, ohne das Ziel zu überschreiten und zurückzuschwingen. Ein echtes Federn oder Abprallen ist damit nicht darstellbar.
Ein leichtes Überschwingen lässt sich bestenfalls antäuschen. Der oft genutzte Wert cubic-bezier(0.34, 1.56, 0.64, 1) wirkt federnd, bleibt aber eine grobe Näherung. Für kritisch gedämpfte oder mehrfach abprallende Bewegungen reicht die kubische Kurve prinzipiell nicht.
Jahrelang haben wir Bewegung mit einem Werkzeug gebaut, das nur weiche Kurven kann. Mit linear() bekommt reines CSS endlich echte Physik, und der Griff zur JavaScript-Bibliothek wird für viele Fälle überflüssig.
— Markus Seyfferth, Chefredakteur Dr. Web
Was bringt die linear()-Funktion?
Der Name führt in die Irre, denn linear() hat nichts mit dem gleichnamigen Schlüsselwort für gleichförmige Bewegung zu tun. Die Funktion interpoliert zwischen einer Liste von Ausgabewerten. Werte über 1 oder unter 0 überschwingen das Ziel und erzeugen so Federn, Abprallen und elastische Effekte in reinem CSS.
Genau hier setzt Carmen Ansios Ansatz an. Sie tastet eine echte Federgleichung an sechzig Zeitpunkten ab und backt die Werte zur Autorenzeit in eine linear()-Kurve. Zur Laufzeit läuft dann kein JavaScript mehr, die Bewegung steckt fertig im Stylesheet.
Grenzen bleiben. Für ziehende Gesten und geschwindigkeitsabhängige Interaktionen, bei denen eine Animation die aktuelle Geschwindigkeit aufnimmt, bleibt eine Bibliothek wie Framer Motion die richtige Wahl. Unsere Faustregel: linear() für abgespielte Übergänge, Physik-Bibliothek für interaktive Bewegung.
Ab wann können Sie linear() einsetzen?
Die Browserunterstützung ist solide. Seit 2024 zählt linear() zum Baseline-Umfang, unterstützt ab Chrome und Edge 113 sowie Firefox 112. Safari hat später nachgezogen, weshalb für sehr alte Versionen weiterhin ein Rückfall auf eine cubic-bezier-Näherung sinnvoll ist.
Praktisch heißt das: Für moderne Zielgruppen ist der produktive Einsatz längst vertretbar. Das Prinzip dahinter ist uralt, die Trickfilmzeichner von Disney nannten es „slow in, slow out“. Ein zentrales Token im Stylesheet hält die Federkurve konsistent und gibt der Bewegung im ganzen Projekt denselben physikalischen Charakter. Für den Einstieg mit fertigen Bausteinen bietet unsere Sammlung der 100 CSS-Buttons zum Kopieren eine praktische Spielwiese.
Quellen
- Carmen Ansio: „Spring Physics in CSS“ und Lab-Beiträge zu Easing, carmenansio.com, April 2026
- MDN Web Docs: easing-function, cubic-bezier() und linear(), developer.mozilla.org
- Josh W. Comeau: „Springs and Bounces in Native CSS“, joshwcomeau.com
