Edytor wygładzania cubic-bézier
Projektuj własne krzywe wygładzania cubic-bezier dzięki edytorowi z przeciąganiem i podglądowi animacji na żywo.
Przeciągnij dwa uchwyty, aby ukształtować krzywą wygładzania.
transition-timing-function: —;
animation-timing-function: —;
Wszystko działa w Twojej przeglądarce — nic nie jest przesyłane.
O Edytor wygładzania cubic-bézier
Edytor funkcji czasowania Cubic-Bézier projektuje niestandardowe funkcje czasowania dla przejść i animacji CSS. Przeciągnij dwa uchwyty kontrolne na płótnie krzywej, a wartość cubic-bezier(x1, y1, x2, y2) aktualizuje się na bieżąco; podgląd animacji odtwarza czasowanie obok liniowego punktu odniesienia, dzięki czemu poczujesz różnicę, z regulowanym czasem trwania i natychmiastowym powtórzeniem.
Dziesięć ustawień wstępnych obejmuje popularne słownictwo — standardowe ease, ease-in, ease-out i ease-in-out, a także wyraziste krzywe, takie jak back i anticipate, które wykraczają poza swoje punkty końcowe, oraz rampy przyspieszania i zwalniania w stylu material. Użyj ich w niezmienionej postaci lub jako punktu wyjścia do dalszego przeciągania.
Możesz też wpisać dokładne współrzędne punktów kontrolnych, kliknąć losowanie dla inspiracji oraz skopiować samą wartość cubic-bezier() lub gotową regułę CSS do wklejenia. Cały edytor działa w Twojej przeglądarce.
Jak korzystać z Edytor wygładzania cubic-bézier
- Przeciągnij dwa uchwyty w edytorze krzywej, aby ukształtować czasowanie.
- Kliknij Powtórz i porównaj animację z czasowaniem z liniowym punktem odniesienia, dostosowując w razie potrzeby czas trwania.
- Wypróbuj ustawienia wstępne — ease, back, anticipate, material i inne — jako szybki punkt wyjścia.
- Dopracuj za pomocą liczbowych pól punktów kontrolnych, aby uzyskać dokładne wartości.
- Skopiuj wartość cubic-bezier() lub kompletny fragment kodu CSS.