Funktionsweise von CSS-Timing-Functions
CSS-Transitions und -Animationen steuern den zeitlichen Verlauf von Eigenschaftsänderungen über Timing-Funktionen. Standardmäßig stehen Entwicklern Schlüsselwörter wie ease, ease-in, ease-out und ease-in-out zur Verfügung. Diese Schlüsselwörter sind vordefinierte Abkürzungen für mathematische Kurven, die über die CSS-Funktion cubic-bezier(x1, y1, x2, y2) definiert werden.
Der CSS Cubic-Bezier-Generator visualisiert diese Kurven und erlaubt es, individuelle Easing-Effekte zu erstellen, die über die Standard-Schlüsselwörter hinausgehen. Die Kurve verläuft dabei stets von unten links (dem Startpunkt bei Zeit 0 und Fortschritt 0) nach oben rechts (dem Endpunkt bei Zeit 1 und Fortschritt 1). Die horizontale Achse (X) repräsentiert das Fortschreiten der Zeit von links nach rechts, während die vertikale Achse (Y) den Animationsfortschritt nach oben darstellt.
Durch das Verschieben von zwei Kontrollpunkten wird die Krümmung und damit die Beschleunigung sowie Verzögerung der Animation definiert. Zur Überprüfung der Bewegung zeigt das Tool eine Live-Vorschau: Ein Punkt bewegt sich entlang der erstellten Kurve, während sich direkt daneben ein zweiter Punkt mit konstanter, linearer Geschwindigkeit bewegt. Dies ermöglicht den direkten visuellen Vergleich der angepassten Beschleunigung mit einer gleichmäßigen Bewegung.
Die mathematischen Kontrollpunkte und Grenzwerte
Eine kubische Bézier-Kurve wird durch vier Punkte definiert. Der Startpunkt (0, 0) und der Endpunkt (1, 1) sind fixiert. Die Form der Kurve wird ausschließlich durch die Koordinaten der zwei freien Kontrollpunkte bestimmt:
- Erster Kontrollpunkt (x1, y1): Beeinflusst den Anfangsverlauf der Kurve.
- Zweiter Kontrollpunkt (x2, y2): Beeinflusst den Endverlauf der Kurve.
Für diese Kontrollpunkte gelten im CSS-Standard und im Generator strikte mathematische Regeln und Grenzwerte:
- X-Werte (Zeitachse): Die Werte für x1 und x2 müssen zwingend im Bereich zwischen 0 und 1 liegen. Da die Zeit nicht rückwärts laufen kann, ist ein Wert außerhalb dieses Intervalls ungültig.
- Y-Werte (Fortschrittsachse): Die Werte für y1 und y2 sind im Generator auf den Bereich von -0.70 bis 1.70 begrenzt. Werte kleiner als 0 oder größer als 1 erlauben es der Animation, über den Start- oder Endpunkt hinauszuweichen, was für spezielle Bewegungseffekte genutzt wird.
Erzeugung von Überschwing- und Rückweicheffekten
Wenn die Y-Koordinaten der Kontrollpunkte außerhalb des Standardbereichs von 0 bis 1 konfiguriert werden, entstehen dynamische Bewegungseffekte:
- Anticipation (Zurückweichen): Ein negativer Y-Wert (z. B. -0.3) führt dazu, dass die Kurve zu Beginn unter die Nulllinie sinkt. Die Animation bewegt sich dadurch zuerst leicht rückwärts, bevor sie in die eigentliche Richtung startet.
- Overshoot (Überschwingen): Ein Y-Wert von über 1.0 (z. B. 1.5) lässt die Kurve über den Endwert von 1.0 hinaussteigen. Das animierte Element schießt über sein Ziel hinaus, bremst ab und kehrt schließlich zum definierten Endzustand zurück.
Ein typisches Beispiel für diesen Effekt ist das Preset "Back Out", welches den CSS-Wert cubic-bezier(0.34, 1.56, 0.64, 1) nutzt. Hier sorgt der Y-Wert des ersten Kontrollpunkts von 1.56 für ein deutliches Überschwingen am Ende der Bewegung.
Bedienung und Validierungsregeln des Generators
Die Erstellung der Kurve erfolgt entweder visuell durch das Ziehen der beiden Griffe direkt auf der Arbeitsfläche oder durch die manuelle Eingabe von Zahlenwerten in die Eingabefelder für die Kontrollpunkte. Das Tool verarbeitet Eingaben und Interaktionen nach folgenden Regeln:
- Tastatursteuerung: Wenn ein Griff eines Kontrollpunkts fokussiert ist, kann dessen Wert durch Drücken der Pfeiltaste nach links präzise dekrementiert werden (beispielsweise auf einen Wert wie
0.99). - Eingabebegrenzung bei Fokusverlust: Wird in ein numerisches Eingabefeld für die X-Achse ein ungültiger Wert wie
9eingetragen, korrigiert das Tool diesen Wert beim Verlassen des Feldes (Fokusverlust) automatisch auf den maximal zulässigen Grenzwert1. - Wiederherstellung bei leeren Feldern: Wird ein numerisches Eingabefeld komplett geleert und verliert anschließend den Fokus, stellt das Tool automatisch den letzten gültigen Wert wieder her.
- Unvollständige Eingaben: Leere oder nicht-numerische Eingaben werden während des Tippens toleriert; das System wartet, bis ein vollständiger, gültiger Wert eingetragen wurde.
- Preset-Auswahl: Über eine Schnellauswahl können Standard-Kurven wie "ease", "ease-in", "ease-out", "ease-in-out" sowie die dynamischen Vorlagen "Back In", "Back Out" und "Back In-Out" direkt geladen werden.
- Kopieren des Wertes: Nach dem Klick auf den generierten
cubic-bezier()-Wert wird dieser in die Zwischenablage kopiert, was durch den Status "Copied" signalisiert wird.
Grenzen der cubic-bezier()-Funktion
Obwohl die kubische Bézier-Kurve hochgradig anpassbare Übergänge ermöglicht, besitzt sie strukturelle Limitierungen. Eine einzelne cubic-bezier()-Kurve kann sich pro Animationszyklus nur in eine Richtung bewegen, eventuell einmalig zurückweichen oder überschwingen und sich dann einpendeln.
Es ist mathematisch ausgeschlossen, mit einer einzigen cubic-bezier()-Funktion komplexe, mehrfach die Richtung wechselnde Bewegungen wie ein elastisches Federn (Elastic) oder ein mehrfaches Aufprallen (Bounce) darzustellen. Für solche Effekte müssen Entwickler auf CSS-Keyframes oder die modernere linear()-Timing-Funktion mit mehreren Stützpunkten ausweichen.
Integration in CSS-Code
Der generierte Funktionswert wird in CSS-Deklarationen für Übergänge oder Keyframe-Animationen eingesetzt. Er steuert die Eigenschaften transition-timing-function oder animation-timing-function.
/* Anwendung in einer Transition-Kurzschreibweise */
.element {
transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Anwendung als eigenständige CSS-Eigenschaft */
.animated-box {
animation-name: slideIn;
animation-duration: 1s;
animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
}
Datenschutz und Datenverarbeitung
Die Berechnung der Kurve und die Erzeugung des CSS-Codes erfolgen vollständig lokal im Webbrowser des Nutzers. Es werden keine eingegebenen Koordinaten, Einstellungen oder Kurvendaten an Server von BroBroGo übertragen.
Häufig gestellte Fragen (FAQ)
Was bedeuten die beiden Griffe und die vier Zahlen?
Die Kurve verläuft von unten links (Start) nach oben rechts (Ende), wobei die Zeit von links nach rechts verläuft und der Fortschritt nach oben zunimmt. Die beiden Griffe sind die Kontrollpunkte, die die Kurve biegen. Jeder hat einen X- und einen Y-Wert, zusammen bilden sie cubic-bezier(x1, y1, x2, y2). X bleibt immer zwischen 0 und 1, während Y über das obere oder untere Ende hinausgehen kann, um ein Überschwingen oder Zurückweichen der Bewegung zu erzeugen.
Wie verwende ich den Wert in meinem CSS?
Kopieren Sie den cubic-bezier()-Wert und fügen Sie ihn überall dort ein, wo eine Timing-Funktion erwartet wird – z. B. bei transition-timing-function, animation-timing-function oder in der Kurzschreibweise wie transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1). Die Schlüsselwörter ease, ease-in, ease-out und ease-in-out sind lediglich vordefinierte cubic-bezier-Kurven. Wenn Sie eines dieser Presets wählen, sehen Sie den exakten Wert dahinter.
Kann man damit einen Bounce- oder elastischen Effekt erzeugen?
Nicht von sich aus. Eine einzelne cubic-bezier-Kurve kann ein Zurückweichen (Anticipation) und ein Überschwingen (Overshoot) erzeugen – die „Back“-Presets ziehen einen Griff über die Box hinaus, um genau das zu tun –, aber sie kann sich nur in eine Richtung bewegen und dann einpendeln. Ein Zurückfedern (Bounce) oder elastische Effekte kehren die Richtung mehrmals um, was eine einzelne cubic-bezier-Kurve nicht darstellen kann. Dafür benötigen Sie CSS-Keyframes oder die linear()-Funktion mit mehreren Stützpunkten.