Generator krzywych cubic-bezier

Krzywa przyspieszenia (timing function) decyduje, jak przejście lub animacja CSS postępuje w czasie. Przeciągnij dwa punkty kontrolne, przetestuj wynik na przykładowej animacji i skopiuj wartość cubic-bezier().

Czym jest cubic-bezier()?

Właściwości transition-timing-function i animation-timing-function (lub trzecia wartość transition) określają, jak zmiana rozkłada się w czasie trwania. cubic-bezier(x1, y1, x2, y2) definiuje sześcienną krzywą Béziera, która zaczyna się w (0, 0) i kończy w (1, 1), z dwoma punktami kontrolnymi: oś X to czas, a oś Y to postęp.

Słowa kluczowe CSS to gotowe krzywe: ease odpowiada cubic-bezier(0.25, 0.1, 0.25, 1), ease-in – (0.42, 0, 1, 1), ease-out – (0, 0, 0.58, 1), a ease-in-out – (0.42, 0, 0.58, 1). Krzywe easeIn…/easeOut… to klasyczne równania Roberta Pennera, szeroko stosowane w bibliotekach animacji.

Wskazówki

Wartości X muszą mieścić się między 0 a 1, ale wartości Y mogą wychodzić poza ten zakres: poniżej 0 lub powyżej 1 animacja „przestrzeliwuje” i wraca, dając delikatny efekt odbicia jak w easeOutBack. Dla elementów pojawiających się na ekranie zwykle najlepiej sprawdzają się krzywe wyjścia (ease-out), które zaczynają szybko i zwalniają na końcu; dla znikających – krzywe wejścia (ease-in).

Czasy od 150 do 400 ms są najczęstsze w interfejsach. Pamiętaj, by respektować preferencję prefers-reduced-motion osób, które wolą mniej animacji.