W tym artykule
Czym sa krzywe Beziera szescienne?
Krzywa Beziera szescienna to funkcja matematyczna używana w CSS do definiowania czasu animacji i przejść. Zapisana jako cubic-bezier(x1, y1, x2, y2), opisuje, jak animacja postepuje od początku do końca, mapując czas na postęp wzdłuż gladkiej krzywej zdefiniowanej przez cztery punkty kontrolne.
W CSS funkcja cubic-bezier() kontroluje easing właściwości transition-timing-function i animation-timing-function. Zamiast ruchu liniowego pozwala tworzyc naturalne przyspieszenia i opoznienia, ktore nasladuja fizyke świata rzeczywistego, sprawiac ze animacje interfejsu sa dopracowane i celowe.
Zrozumienie czterech wartości kontrolnych
Funkcja cubic-bezier() przyjmuje cztery wartości definiujace dwa punkty kontrolne na krzywej. Te punkty kontrolne ksztaltuja sposob przyspieszania i zwalniania animacji.
- X1 (0-1) — pozycja pozioma pierwszego punktu kontrolnego, okreslajaca, kiedy konczy sie faza początkowego przyspieszenia
- Y1 (dowolna wartość) — pozycja pionowa pierwszego punktu kontrolnego, kontrolujaca szybkość startu animacji. Wartości powyżej 1 tworza efekt przekroczenia
- X2 (0-1) — pozycja pozioma drugiego punktu kontrolnego, okreslajaca, kiedy zaczyna sie faza zwalniania
- Y2 (dowolna wartość) — pozycja pionowa drugiego punktu kontrolnego, kontrolujaca zakonczenie animacji. Wartości powyżej 1 tworza efekt odbicia
Wypróbuj za darmo — bez rejestracji
Utworz krzywa Beziera szescienna →Popularne presety easingu i kiedy ich używać
CSS udostępnia kilka wbudowanych slow kluczowych easingu, ktore odpowiadaja konkretnym wartosciom cubic-bezier. Zrozumienie tych presetow pomaga wybrac odpowiednie odczucie dla animacji.
- ease (0.25, 0.1, 0.25, 1.0) — domyślny CSS, rozpoczyna szybko, a następnie lagodnie zwalnia. Dobry dla większości ogolnych przejść
- ease-in (0.42, 0, 1.0, 1.0) — rozpoczyna wolno i przyspiesza. Najlepszy dla elementow opuszczajacych ekran lub zanikajacych
- ease-out (0, 0, 0.58, 1.0) — rozpoczyna szybko i zwalnia. Idealny dla elementow wchodzacych na ekran lub pojawiajacych sie
- ease-in-out (0.42, 0, 0.58, 1.0) — wolny początek i koniec z szybszym srodkiem. Odpowiedni dla animacji w petli lub elementow pozostajacych na ekranie
- linear (0, 0, 1, 1) — stala prędkość od początku do końca. Używaj dla paskow postepu, spinnerow ładowania lub przejść kolorow, gdzie jednolita prędkość jest naturalna
Często zadawane pytania
Czy wszystkie przeglądarki obsługują cubic-bezier()?
Tak. Funkcja cubic-bezier() jest obslugiwana we wszystkich głównych przeglądarkach od IE 10 (2012). Jest częścią specyfikacji CSS Transitions i CSS Animations, ktore maja pełne wsparcie w Chrome, Firefox, Safari, Edge i wszystkich nowoczesnych przeglądarkach mobilnych.
Czy można tworzyc animacje sprezynowe lub odbijajace za pomoca cubic-bezier()?
Krzywe Beziera szescienne moga przyblizyc proste efekty odbicia, używając wartości Y większych niz 1 (przekroczenie). Na przykład cubic-bezier(0.34, 1.56, 0.64, 1) tworzy lekkie przekroczenie. Jednak prawdziwa fizyka sprezynowa z wieloma odbiciami wymaga CSS spring() (jeszcze nie szeroko obsługiwane) lub bibliotek animacji JavaScript, takich jak GSAP lub Framer Motion.
Jaka jest różnica między przejściami CSS a animacjami CSS?
Przejścia CSS animuja między dwoma stanami, gdy zmienia sie właściwość (np. przy najechaniu kursorem). Animacje CSS używają klatek kluczowych do definiowania wieloetapowych sekwencji, ktore moga sie zapetlac i uruchamiac niezależnie. Oba używają tych samych funkcji czasowych, w tym cubic-bezier(), do kontrolowania easingu między stanami lub klatkami kluczowymi.