W tym artykule
Czym sa krzywe Beziera szescienne?
Krzywa Beziera szescienna to funkcja matematyczna uzywana w CSS do definiowania czasu animacji i przejsc. Zapisana jako cubic-bezier(x1, y1, x2, y2), opisuje, jak animacja postepuje od poczatku do konca, mapujac czas na postep wzdluz gladkiej krzywej zdefiniowanej przez cztery punkty kontrolne.
W CSS funkcja cubic-bezier() kontroluje easing wlasciwosci transition-timing-function i animation-timing-function. Zamiast ruchu liniowego pozwala tworzyc naturalne przyspieszenia i opoznienia, ktore nasladuja fizyke swiata rzeczywistego, sprawiac ze animacje interfejsu sa dopracowane i celowe.
Zrozumienie czterech wartosci kontrolnych
Funkcja cubic-bezier() przyjmuje cztery wartosci 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 poczatkowego przyspieszenia
- Y1 (dowolna wartosc) — pozycja pionowa pierwszego punktu kontrolnego, kontrolujaca szybkosc startu animacji. Wartosci powyzej 1 tworza efekt przekroczenia
- X2 (0-1) — pozycja pozioma drugiego punktu kontrolnego, okreslajaca, kiedy zaczyna sie faza zwalniania
- Y2 (dowolna wartosc) — pozycja pionowa drugiego punktu kontrolnego, kontrolujaca zakonczenie animacji. Wartosci powyzej 1 tworza efekt odbicia
Wypróbuj za darmo — bez rejestracji
Utworz krzywa Beziera szescienna →Popularne presety easingu i kiedy ich uzywac
CSS udostepnia 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) — domyslny CSS, rozpoczyna szybko, a nastepnie lagodnie zwalnia. Dobry dla wiekszosci ogolnych przejsc
- 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 poczatek i koniec z szybszym srodkiem. Odpowiedni dla animacji w petli lub elementow pozostajacych na ekranie
- linear (0, 0, 1, 1) — stala predkosc od poczatku do konca. Uzywaj dla paskow postepu, spinnerow ladowania lub przejsc kolorow, gdzie jednolita predkosc jest naturalna
Czesto zadawane pytania
Czy wszystkie przegladarki obsluguja cubic-bezier()?
Tak. Funkcja cubic-bezier() jest obslugiwana we wszystkich glownych przegladarkach od IE 10 (2012). Jest czescia specyfikacji CSS Transitions i CSS Animations, ktore maja pelne wsparcie w Chrome, Firefox, Safari, Edge i wszystkich nowoczesnych przegladarkach mobilnych.
Czy mozna tworzyc animacje sprezynowe lub odbijajace za pomoca cubic-bezier()?
Krzywe Beziera szescienne moga przyblizyc proste efekty odbicia, uzywajac wartosci Y wiekszych niz 1 (przekroczenie). Na przyklad 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 obslugiwane) lub bibliotek animacji JavaScript, takich jak GSAP lub Framer Motion.
Jaka jest roznica miedzy przejsciami CSS a animacjami CSS?
Przejscia CSS animuja miedzy dwoma stanami, gdy zmienia sie wlasciwosc (np. przy najechaniu kursorem). Animacje CSS uzywaja klatek kluczowych do definiowania wieloetapowych sekwencji, ktore moga sie zapetlac i uruchamiac niezaleznie. Oba uzywaja tych samych funkcji czasowych, w tym cubic-bezier(), do kontrolowania easingu miedzy stanami lub klatkami kluczowymi.