Przeciągnij dwa uchwyty, aby ukształtować krzywą easing cubic-bezier(), puść ją w wyścigu z linear i ease, zacznij od słów kluczowych ze specyfikacji lub presetów Tailwind i skopiuj CSS albo klasę Tailwind.
Krzywa easing cubic-bezier(x1, y1, x2, y2) biegnie od 0,0 do 1,1 i jest wyginana przez dwa punkty kontrolne. Obie wartości x muszą mieścić się między 0 a 1, inaczej przeglądarka odrzuca całą deklarację, natomiast wartości y mogą spaść poniżej 0 lub przekroczyć 1, dając efekt przestrzelenia. Przeciągnij uchwyty poniżej i obserwuj wyścig kropek.
Słowa kluczowe easing w CSS jako wartości cubic-bezier() (CSS Easing Functions Level 1)
Słowo kluczowe
Wartość cubic-bezier()
Wrażenie
cubic-bezier(0, 0, 1, 1)
Stała prędkość, mechanicznie
ease (domyślne)
cubic-bezier(0.25, 0.1, 0.25, 1)
Szybki start, długie łagodne hamowanie
cubic-bezier(0.42, 0, 1, 1)
Powolny start, gwałtowne zatrzymanie
cubic-bezier(0, 0, 0.58, 1)
Szybki start, miękkie lądowanie
cubic-bezier(0.42, 0, 0.58, 1)
Miękko na obu końcach
Wpisywanie czterech liczb i zgadywanie, jak będą wyglądać w ruchu, rzadko się sprawdza. Tutaj kształtujesz krzywą ręcznie, widzisz aktualizowane liczby i porównujesz ruch obok linii prostej i domyślnego ustawienia przeglądarki, zanim cokolwiek wkleisz do arkusza stylów.
Przeciągnij niebieski i różowy uchwyt na wykresie albo wpisz dokładne liczby w cztery pola. Pola x są ograniczone do zakresu od 0 do 1.
Naciśnij Odtwórz, aby wysłać jednocześnie trzy kropki przez tor: Twoją krzywą, linear i ease.
Wybierz preset, aby zacząć od słów kluczowych ze specyfikacji, domyślnych wartości Tailwind lub jednej z naszych krzywych z przestrzeleniem.
Skopiuj deklarację CSS albo klasę arbitrary Tailwind.
Używaj ease-out dla elementów wchodzących na ekran, a ease-in dla elementów, które go opuszczają. Elementy przesuwające się między dwoma miejscami na ekranie zwykle wyglądają najlepiej z ease-in-out.
y1 powyżej 1 sprawia, że ruch przestrzeliwuje cel i wraca na miejsce. W animacjach interfejsu trzymaj przestrzelenie na niskim poziomie, około 1.2 do 1.6.
Krótkie czasy trwania ukrywają różnice między krzywymi. Oceniaj krzywą przy 600 milisekundach lub więcej, a potem ją skróć.
Szanuj osoby, które proszą o mniej ruchu: otocz duże animacje regułą @media (prefers-reduced-motion: no-preference).
Najczęściej zadawane pytania
Co oznaczają cztery liczby w cubic-bezier()?
To współrzędne dwóch punktów kontrolnych: x1 i y1 dla pierwszego, x2 i y2 dla drugiego. Oś x to część czasu trwania, która już upłynęła, a oś y to postęp animowanej wartości.
Dlaczego moje cubic-bezier jest ignorowane?
Jeśli którakolwiek wartość x jest mniejsza niż 0 lub większa niż 1, funkcja jest nieprawidłowa, a przeglądarka odrzuca deklarację i wraca do wartości obowiązującej wcześniej. Sprawdź, czy x1 i x2 mieszczą się między 0 a 1.
Czy ease-in i ease-out w Tailwind to to samo co słowa kluczowe CSS?
Nie. Domyślny motyw Tailwind definiuje ease-in jako cubic-bezier(0.4, 0, 1, 1), ease-out jako cubic-bezier(0, 0, 0.2, 1), a ease-in-out jako cubic-bezier(0.4, 0, 0.2, 1), co różni się od słów kluczowych CSS o tych samych nazwach. Oba zestawy są dostępne jako presety w edytorze, więc możesz je porównać.
Jak użyć własnej krzywej w Tailwind?
Wpisz wartość w nawiasach kwadratowych bez spacji, na przykład ease-[cubic-bezier(0.34,1.56,0.64,1)]. Aby używać jej wielokrotnie, zadeklaruj zmienną motywu, taką jak --ease-springy, w @theme, a Tailwind utworzy klasę ease-springy.
Czy krzywa Béziera może dać odbicie z kilkoma podskokami?
Nie. Jedna krzywa sześcienna może raz przestrzelić i wrócić, ale nie odbije się kilka razy. Dla odbicia z wieloma podskokami użyj @keyframes z kilkoma krokami albo nowszej funkcji linear(), która przyjmuje listę punktów.
Jak czytać wykres
Czas biegnie od lewej do prawej, a postęp od dołu do góry. Stroma część krzywej oznacza szybki ruch, płaska oznacza, że element prawie się nie porusza. Linia z rogu do rogu to ruch liniowy.
Uchwyty powyżej górnej krawędzi lub poniżej dolnej na chwilę wypychają postęp ponad 100 procent lub poniżej 0 procent. Tak uzyskasz łagodne przestrzelenie bez pisania keyframes.
Gdzie wstawić krzywą w CSS
Ta sama wartość działa w transition-timing-function, animation-timing-function oraz w skrótach transition i animation. Wewnątrz @keyframes funkcja czasu ustawiona na klatce kluczowej dotyczy tylko odcinka do następnej klatki.
Niektóre właściwości nie mogą spaść poniżej zera, na przykład opacity czy szerokość. Jeśli krzywa przestrzeli poniżej 0, te wartości są przycinane, więc spadku po prostu nie widać.
Wartości presetów
Pierwsze pięć pochodzi ze specyfikacji CSS Easing Functions. Wiersze Tailwind to domyślny motyw tego frameworka. Wiersze z przestrzeleniem to punkty wyjścia, które dostroiliśmy na oko.
Wszystkie presety w edytorze
Nazwa
Źródło
Wartość
Słowo kluczowe CSS
cubic-bezier(0, 0, 1, 1)
Słowo kluczowe CSS
cubic-bezier(0.25, 0.1, 0.25, 1)
Słowo kluczowe CSS
cubic-bezier(0.42, 0, 1, 1)
Słowo kluczowe CSS
cubic-bezier(0, 0, 0.58, 1)
Słowo kluczowe CSS
cubic-bezier(0.42, 0, 0.58, 1)
ease-in (Tailwind)
Domyślne Tailwind
cubic-bezier(0.4, 0, 1, 1)
ease-out (Tailwind)
Domyślne Tailwind
cubic-bezier(0, 0, 0.2, 1)
ease-in-out (Tailwind)
Domyślne Tailwind
cubic-bezier(0.4, 0, 0.2, 1)
sprężyste wyjście
Przestrzelenie
cubic-bezier(0.34, 1.56, 0.64, 1)
Przestrzelenie
cubic-bezier(0.6, -0.4, 0.4, 1.4)
Przestrzelenie
cubic-bezier(0.2, 0.9, 0.3, 1.1)
Użycie własnej krzywej
Karta z przestrzeleniem po najechaniu
Najedź na kartę. Unosi się nieco ponad punkt spoczynku i wraca na miejsce, a wszystko to dzięki funkcji czasu.
Tailwind: jednorazowa klasa i token motywu do wielokrotnego użycia
Forma w nawiasach nie może zawierać spacji. Zmienna w @theme zamienia krzywą w nazwaną klasę.
Edytor krzywej easing
Przeciągnij uchwyty lub wpisz wartości, naciśnij Odtwórz, aby puścić swoją krzywą w wyścigu z linear i ease, a potem skopiuj CSS lub klasę Tailwind.
Słowo kluczowe CSS
Słowo kluczowe CSS
Słowo kluczowe CSS
Słowo kluczowe CSS
Słowo kluczowe CSS
Domyślne Tailwind
Domyślne Tailwind
Domyślne Tailwind
Przestrzelenie
Przestrzelenie
Przestrzelenie
Wykres krzywej easing. Przeciągnij dwa uchwyty, aby zmienić krzywą.
Pierwszy punkt kontrolny
Drugi punkt kontrolny
Presety easing
Czas trwania: {n} ms
Odtwórz
Twoja krzywa
Kopiuj CSS
Kopiuj klasę Tailwind
Ta krzywa odpowiada słowu kluczowemu CSS {v}.
Wartości x mieszczą się między 0 a 1. Wartości y mogą przestrzelić.