Aufgabenpfad / von der Eingabe zum Ergebnis
So gestaltest du eine Cubic-Bezier-Easing-Kurve
- 01
Platziere den ersten Kontrollpunkt
Setze Kontrollpunkt X1 zwischen 0 und 1 und Kontrollpunkt Y1 zwischen −1 und 2. Das Kurvendiagramm zeichnet sich live neu, mit einer Hilfslinie vom Startpunkt zu deinem Griff.
- 02
Platziere den zweiten Kontrollpunkt
Setze Kontrollpunkt X2 (0–1) und Kontrollpunkt Y2 (−1 bis 2). Einen Y-Wert über 1 hinauszuziehen erzeugt das Überschwingen, das ein Easing federnd wirken lässt; Y1 unter 0 zu ziehen fügt einen Moment der Antizipation hinzu, bevor die Bewegung startet.
- 03
Lege die Dauer fest
Wähle eine Dauer von 0,1 bis 4 Sekunden. Die Markierung auf der Bewegungsschiene läuft in Schleife mit deiner exakten Kurve darüber — die Kadenz, die du siehst, ist die Kadenz, die du auslieferst.
- 04
Oder starte mit einer bekannten Kurve
Die Standardkurve — 0,25; 0,1; 0,25; 1 — ist exakt das Standard-Schlüsselwort ease und ein neutraler Ausgangspunkt. Drücke Beispiel laden für eine federnde Überschwing-Kurve (0,34; 1,56; 0,64; 1), die zeigt, was ein Y-Wert über 1 bewirkt.
- 05
Kopiere das Timing-CSS
CSS kopieren oder .css herunterladen speichert toolars-cubic-bezier.css. Die .motion-Regel setzt transition-duration und beide timing-function-Eigenschaften. animation-duration wird nicht gesetzt; für Keyframe-Animationen musst du die Dauer separat angeben.
- 06
Lies das Diagramm vor dem Ausliefern
Das Diagramm zeichnet den Fortschritt über die Zeit zwischen den festen Start- und Endpunkten: Flache Abschnitte sind langsam, steile schnell. Eine Kurve, die unter den Start fällt oder über das Ende steigt, ist kein Fehler — das ist Antizipation und Überschwingen, ehrlich gezeichnet.