Jaki jest domyślny easing w CSS?

Przejścia i animacje domyślnie używają ease, co odpowiada cubic-bezier(0.25, 0.1, 0.25, 1): szybki start i łagodne zakończenie.

Jak uzyskać przestrzelenie lub odbicie?

Przeciągnij uchwyt powyżej 1 lub poniżej 0. easeOutBack, cubic-bezier(0.34, 1.56, 0.64, 1), wychodzi poza punkt końcowy i wraca na miejsce. Pojedyncza krzywa Béziera trzeciego stopnia nie odbije się kilka razy; użyj do tego klatek kluczowych lub funkcji linear().

Czy mogę użyć tej samej wartości w animacjach?

Tak. Wartość działa w transition-timing-function, animation-timing-function i w opcji easing interfejsu Web Animations API.

Generator Cubic Bezier

Kształtuj krzywe easingu CSS, przeciągając dwa uchwyty. Porównaj ruch z liniowym tempem i skopiuj cubic-bezier() do przejść lub Tailwind.

Edytor krzywej

Przeciągnij dowolny uchwyt. Linia przerywana to tempo liniowe.

Podgląd ruchu

Twoja krzywa

Liniowo

Pozycja w każdej dziesiątej części czasu trwania

transition: transform 1000ms ease;
/* or */
animation-timing-function: ease;

Wszystko pozostaje w Twojej przeglądarce.

Źródła

MDN — cubic-bezier()
W3C — CSS Easing Functions Level 1

Aktualizacja strony: 2026-10-25

Edytor krzywej

Podgląd ruchu

Instrukcja i przykład

Powiązane narzędzia

Źródła