Generator CSS Cubic Bezier

Krzywa przebiega od lewego dolnego rogu (początek) do prawego górnego (koniec). Oś pozioma to czas, a pionowa to postęp animacji. Dwa uchwyty to punkty kontrolne, które wyginają krzywą — każdy ma współrzędne X i Y, co daje zapis cubic-bezier(x1, y1, x2, y2). Współrzędna X musi mieścić się w przedziale od 0 do 1, natomiast Y może wykraczać poza te granice, co pozwala na uzyskanie efektu cofnięcia lub przestrzelenia celu.

Skopiuj wygenerowaną funkcję cubic-bezier() i wklej ją w kodzie CSS tam, gdzie definiuje się dynamikę przejścia — np. transition-timing-function, animation-timing-function lub w zapisie skróconym, np. transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1). Słowa kluczowe takie jak ease, ease-in, ease-out i ease-in-out to po prostu predefiniowane krzywe cubic-bezier — wybór tych szablonów pokaże dokładne wartości stojące za tymi nazwami.

Nie bezpośrednio. Pojedyncza krzywa cubic-bezier może stworzyć efekt cofnięcia lub lekkiego przestrzelenia (szablony typu „back” wyciągają jeden z uchwytów poza obszar wykresu), ale ruch może odbyć się tylko w jedną stronę przed zatrzymaniem. Efekty typu bounce (odbicie) lub elastic wymagają wielokrotnej zmiany kierunku, czego nie da się zapisać jedną krzywą — do tego potrzebne są klatki kluczowe CSS (@keyframes) lub funkcja linear() z wieloma punktami.