Właściwość animation-timing-function

Właściwość animation-timing-function ustawia prędkość zmiany (przyspieszenie) animacji. Na przykład, najpierw wolno, potem szybko, potem znowu wolno itd.

Składnia

Wartości

Wartość	Opis
ease	Najpierw wolno, potem szybko, na końcu znowu wolno.
ease-in	Zaczyna się wolno i stopniowo przyspiesza.
ease-out	Zaczyna się szybko i stopniowo zwalnia.
ease-in-out	Najpierw wolno, potem szybko, na końcu znowu wolno. Różni się od ease prędkością.
linear	Zawsze taka sama prędkość.
step-start	Brak animacji, właściwość natychmiast przyjmuje końcową wartość.
step-end	Brak animacji, właściwość czeka czas ustawiony w animation-duraton, a następnie natychmiast przyjmuje końcową wartość.
steps	Wartość właściwości zmienia się skokowo.
cubic-bezier	Krzywa Beziera, która może określać dowolną animację. Zobacz generator krzywych Beziera.

Wartość domyślna: ease.

Porównanie różnych wartości

Najedź myszką na przedstawione poniżej bloki, aby zobaczyć działanie wszystkich rodzajów funkcji czasowych:

Zobacz też