Co to jest cubic-bezier i czemu 'ease' to za mało?
Każda animacja CSS ma krzywą przyspieszenia (timing function). `ease`, `linear`, `ease-in-out` to gotowce, ale w nowoczesnym UI animacja powinna czuć się naturalnie (jak rzeczywistość) - element przyspiesza, zwalnia, czasem lekko cofa się.
cubic-bezier(x1, y1, x2, y2) daje Ci pełną kontrolę nad krzywą. Wpisujesz 4 liczby i animacja zachowuje się dokładnie tak jak chcesz: powolny start z mocnym końcem, lub odwrotnie, albo lekki "back" (przekroczenie końca i powrót, jak gumka).
Tu masz interaktywny wykres. Przeciągaj dwa kolorowe punkty (kontrolne) żeby zmienić kształt krzywej. Pod spodem animacja kuli pokazuje jak Twoja krzywa wygląda w ruchu. Liniowe wartości na osi Y (poza 0-1) tworzą efekt bounce / back.
Jak korzystać
- Wybierz preset z prawej kolumny (linear, ease-in, ease-out, bounce, back). Każdy to klasyczna krzywa.
- Przeciągnij niebieski lub fioletowy punkt na wykresie żeby zmienić kształt krzywej.
- Pod spodem zobaczysz animację kuli używającą Twojej krzywej. Replay przyciskiem jeśli minęło.
- Suwak czas trwania (100-3000ms) pokazuje jak krzywa zachowuje się przy różnych prędkościach.
- Skopiuj cubic-bezier(...) i wklej do `transition-timing-function` albo `animation-timing-function`.
Do czego się przydaje
Krzywa Béziera to różnica między tanim a premium UI. Przykład: hover na karcie z `transition: transform 200ms linear` vs `200ms cubic-bezier(0.4, 0, 0.2, 1)` (Material standard easing) = niebo i ziemia w odczuciu:
- Modal pojawia się płynnie z `ease-out-cubic`. Szybki start, miękki koniec = naturalny ruch.
- Karta wraca po hoverze z `ease-in-cubic`. Powolny start, szybki koniec = symuluje grawitację.
- Bouncy reveal z `ease-out-back` (y2 powyżej 1). Element wjeżdża, lekko przekracza pozycję, wraca. Przyciąga uwagę bez denerwowania.
- iOS-style spring to mocniejszy back/elastic, czasem łatwiej w Framer Motion (spring physics zamiast bezier).
- Material Design używa `cubic-bezier(0.4, 0, 0.2, 1)` (standard ease) dla większości komponentów. Apple HIG ma własne, podobne wartości.
- Smooth scrolling (np. anchor link): `ease-in-out` daje "ważne" przejście, fancy łatwiej zauważalne.
Po wybraniu krzywej, użyj jej w `transition`, `animation` (z @keyframes) i Framer Motion (`ease: [0.4, 0, 0.2, 1]`). Dla edytowania animacji @keyframes zobacz generator animacji CSS.