CSS Cubic-Bezier-Generator

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.

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.

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.