Krzywa cubic-bezier
Stwórz krzywą animacji CSS, przeciągając uchwyty, z animowanym podglądem.
- Natychmiast
- Za darmo
- Prywatnie (przetwarzane lokalnie)
- Bez rejestracji
Narysuj swoją krzywą animacji
Przeciągaj dwa uchwyty na wykresie, by ukształtować easing, patrz, jak animowana kulka odtwarza ruch, i skopiuj wartość cubic-bezier() do CSS.
-
Zacznij od ustawienia
ease, ease-in-out, linear…
-
Dopasuj uchwyty
X = czas (0–1), Y swobodne dla odbicia.
-
Skopiuj CSS
Wklej do transition lub animation.
Ustawienia CSS
| Nazwa | cubic-bezier |
|---|---|
| linear | (0, 0, 1, 1) |
| ease | (0.25, 0.1, 0.25, 1) |
| ease-in | (0.42, 0, 1, 1) |
| ease-out | (0, 0, 0.58, 1) |
| ease-in-out | (0.42, 0, 0.58, 1) |
X ograniczone do [0,1], Y może przekraczać dla odbić. Podgląd przez Web Animations API, wszystko lokalnie.
Najczęstsze pytania
Czym jest krzywa cubic-bezier?
To funkcja czasu opisująca, jak animacja przyspiesza i zwalnia. Definiują ją dwa punkty kontrolne (x1, y1, x2, y2). W CSS: transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1).
Czemu wartości Y mogą przekraczać 1?
X pozostają między 0 a 1 (czas), ale Y mogą wyjść poza [0,1], tworząc efekt odbicia lub przeskoku (element idzie dalej i wraca). Tak powstają krzywe „back” i elastyczne.
Jak użyć tego w CSS?
Wklej wartość w transition: all 0.3s cubic-bezier(…) lub w animation-timing-function. Animowany podgląd pokazuje rzeczywisty wynik przed wklejeniem.
Jakie są standardowe ustawienia?
ease = cubic-bezier(0.25, 0.1, 0.25, 1), ease-in = (0.42, 0, 1, 1), ease-out = (0, 0, 0.58, 1), ease-in-out = (0.42, 0, 0.58, 1), linear = (0, 0, 1, 1). Zacznij od ustawienia i dopasuj uchwyty.