Funkcje easing: ease, linear, cubic-bezier

Funkcja wygładzania określa krzywą prędkości przejścia lub animacji — sposób, w jaki animacja przyspiesza lub zwalnia w czasie jej trwania.

linear utrzymuje stałą prędkość przez cały czas trwania przejścia. Przydaje się w przypadku pasków ładowania i wskaźników postępu, gdy oczekiwany jest równomierny ruch.

ease zaczyna się szybko, a następnie zwalnia pod koniec. Jest to wartość domyślna, która sprawdza się naturalnie w większości przejść interfejsu użytkownika.

ease-in zaczyna się powoli i przyspiesza. Dobrze sprawdza się w przypadku elementów opuszczających ekran (animacje wyjścia).

ease-out zaczyna się szybko i zwalnia. Doskonale sprawdza się w przypadku elementów pojawiających się na ekranie — wchodzą dynamicznie i płynnie się zatrzymują.

ease-in-out zaczyna się i kończy powoli, a w środku przebiega szybciej. Najlepiej sprawdza się w zapętlonych animacjach lub animacjach wykonywanych naprzemiennie.

Definiuje niestandardową krzywą Béziera za pomocą czterech punktów kontrolnych. Umożliwia tworzenie krzywych wygładzania przypominających sprężynę oraz innych niestandardowych krzywych.

Cztery wartości definiują dwa punkty kontrolne: cubic-bezier(x1, y1, x2, y2). Wartości większe od 1 na osi y tworzą efekty wykraczania poza zakres (sprężyny). Do wizualizowania krzywych można używać narzędzi takich jak easings.net.

steps(n, direction) dzieli animację na n dyskretnych, równych kroków. Doskonale sprawdza się w animacjach sprite'ów i efektach maszynowego pisania.

Drugi argument określa, kiedy następuje krok:

• jump-start: pierwszy krok w chwili 0
• jump-end: ostatni krok w chwili końcowej (domyślnie)
• jump-both: kroki zarówno na początku, jak i na końcu
• jump-none: brak kroku na obu końcach

Nowa funkcja linear() umożliwia definiowanie dowolnych krzywych wygładzania za pomocą wielu punktów — pozwalając tworzyć efekty sprężyny i odbicia w czystym CSS, bez ograniczeń funkcji cubic-bezier.

Funkcje wygładzania określają krzywe prędkości animacji. Wbudowane opcje to: linear, ease, ease-in, ease-out, ease-in-out. Do tworzenia niestandardowych krzywych służy cubic-bezier(). Dyskretne kroki definiuje się za pomocą steps(). Nowa funkcja linear() umożliwia tworzenie złożonych krzywych przypominających sprężynę.