⭐ 0
🔍
Text Bild PDF & Dokumente Audio Musik Elektronik Zeit Dienstprogramme Validatoren Esoterik Spiele

CSS-Easing-Kurve im Bounce-Stil

Entwerfen Sie eine benutzerdefinierte CSS-Cubic-Bezier()-Timing-Funktion, indem Sie zwei Kontrollpunkte ziehen, eine Live-Vorschau anhand einer linearen Referenz anzeigen und dann den fertigen Wert kopieren.

Ziehen Sie den orangefarbenen Griff (P1) und den roten Griff (P2), um die Kurve neu zu formen – die Pfeiltasten funktionieren auch. X bleibt zwischen 0 und 1, wie es CSS erfordert; Ziehen Sie einen Griff über oder unter das Feld, um y über diesen Bereich hinaus zu senden, um Überschwing- und Bounce-Effekte zu erzielen.

Deine Kurve

Linear (zum Vergleich)

Verarbeitung... 0%

Ergebnis

Auf dieser Seite wird der Generator geöffnet, wobei x1=0,68, y1=-0,55, x2=0,265, y2=1,55 bereits geladen ist – eine Überschwingkurve, die einige Easing-Bibliotheken als „easeOutBack“ bezeichnen. Das negative y1 und das y2 über 1 sind genau der Grund, warum die Animationsvorschau unten über ihren Anfang und ihr Ende hinaus zurückzieht, bevor sie sich beruhigt; Ziehen Sie einen der Griffe oder bearbeiten Sie die Zahlen, um den Effekt stärker oder sanfter zu machen.

Um ehrlich zu sein: Eine einzelne kubisch-bezier()-Kurve hat nur zwei Kontrollpunkte, sodass sie eine Überschwing- und Setzbewegung annähern kann, keinen echten physischen Multi-Bounce-Bounce mit mehreren abnehmenden Sprüngen. Für einen buchstäblichen Ball-Bounce-Effekt benötigen Sie mehrere miteinander verkettete Keyframes oder Steps()-Segmente – diese Kurve kommt einer einfachen Übergangs-Timing-Funktion in einer Zeile am nächsten.

Dieses einzelne Überschwingen ist immer noch genau das, was sich die meisten federnden Benutzeroberflächen wünschen: eine Schaltfläche, die etwas über ihre Ruhegröße hinausspringt, ein Modal, das überschwingt, bevor es sich beruhigt, eine Karte, die an ihren Platz springt. Kopieren Sie den Wert so, wie er ist, um ein bissiges Gefühl zu erzielen, oder verringern Sie y1 in Richtung 0 und y2 in Richtung 1, um das Überschwingen zurückzudrehen.

🛡️
Im Browser ausgeführt

Ihre Dateien und Eingaben verlassen dieses Gerät nie. Die Verarbeitung läuft vollständig offline. 100 % sicher.

Akzeptierte Formate & Regeln

  • Ziehbarer SVG-Kurveneditor mit zwei Griffen (P1 und P2) sowie editierbaren x1/y1/x2/y2-Zahleneingaben für pixelgenaue Werte.
  • Looping-Animationsvorschau, die Ihr benutzerdefiniertes kubisches Bezier()-Timing mit einem linearen Referenzball vergleicht, sodass Sie die Beschleunigung sehen und nicht nur ablesen können.
  • Kopierbare kubische Bézier-Zeichenfolge (x1, y1, x2, y2), bereit für die Übergangs-Timing-Funktion oder die Animations-Timing-Funktion, plus voreingestellte Seiten für Easy-in-out, Bounce und die Standardkurve von Material Design.

Wichtigste Vorteile

✓ Ziehen Sie an einem der Kontrollpunktgriffe und beobachten Sie, wie die Kurve, die Live-Animationsvorschau und der kopierbare CSS-String gemeinsam aktualisiert werden – Sie müssen sich die Koordinatenberechnung nicht merken.
✓ Y kann für Feder- und Sprungeffekte über 0 und 1 hinausgehen, während X auf den von CSS tatsächlich geforderten Bereich von 0–1 beschränkt bleibt, sodass jeder Wert, den Sie kopieren, in dem Moment gültig ist, in dem Sie ihn einfügen.
✓ Die Parallelvorschau lässt Ihre benutzerdefinierte Kurve gegen eine einfache lineare Referenz laufen, sodass der Unterschied im Bewegungsgefühl – der gesamte Grund für die Verwendung der Beschleunigung – auf einen Blick offensichtlich ist und nicht nur in der Codeausgabe.

Anwendungsfälle

  • • Benötigen Sie einen benutzerdefinierten CSS-Wert „transition-timing-function“ oder „animation-timing-function“ anstelle eines der integrierten Ease-Schlüsselwörter?
  • • Möchten Sie genau sehen, wie „cubic-bezier(0.42, 0, 0.58, 1)“ – die reellen Zahlen hinter dem CSS-eigenen Schlüsselwort „ease-in-out“ – in Bewegung aussieht, bevor Sie es ausliefern?
  • • Erstellen Sie eine Hüpfschaltflächen-, Modal- oder Kartenanimation und benötigen eine fertige Overshoot-Easing-Kurve, die Sie direkt in Ihr Stylesheet kopieren können?