Atrybut animation-timing-function w CSS

Definicja i użycie

funkcja-timing-animation Określa krzywą prędkości animacji.

Krzywe prędkości definiują czas, który animacja potrzebuje, aby przejść z jednego zestawu CSS do drugiego.

Krzywe prędkości służą do sprawienia, że zmiany są bardziej płynne.

Inne źródła:

Kurs CSS3:Animacje CSS

Przeglądarka HTML DOM:Atrybut animationTimingFunction

Przykład

Przykład 1

Odtwarzanie animacji z恒定速度 od początku do końca:

div
{
funkcja-timing-animation:2s;
}

Spróbuj sam

Przykład 2

Aby lepiej zrozumieć różne wartości funkcji czasowych, przedstawiono pięć różnych elementów div z pięcioma różnymi wartościami:

#div1 {funkcja-timing-animation: liniowa;}
#div2 {funkcja-timing-animation: ease;}
#div3 {funkcja-timing-animation: ease-in;}
#div4 {funkcja-timing-animation: ease-out;}
#div5 {funkcja-timing-animation: ease-in-out;}

Spróbuj sam

Przykład 3

Tak jak w poprzednim przykładzie, ale krzywą prędkości definiuje funkcja cubic-bezier:

#div1 {animation-timing-function: cubic-bezier(0,0,1,1);}
#div2 {animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {animation-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {animation-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {animation-timing-function: cubic-bezier(0.42,0,0.58,1);}

Spróbuj sam

Gramatyka CSS

animation-timing-function: value;

animation-timing-function używa matematycznej funkcji o nazwie funkcja trójkątna (Cubic Bezier), aby generować krzywą prędkości. Możesz użyć swoich wartości, jak również wartości z góry określonych:

Wartość Opis Test
linear Tempo animacji jest takie samo od początku do końca. Test
ease Domyślnie. Animacja zaczyna się wolno, potem przyspiesza, a przed zakończeniem zwalnia. Test
ease-in Animacja zaczyna się wolno. Test
ease-out Animacja kończy się wolno. Test
ease-in-out Animacja zaczyna się i kończy wolno. Test
cubic-bezier(n,n,n,n) W wartościach własnych funkcji cubic-bezier. Możliwe wartości to liczby z zakresu 0 do 1.

Wskazówka:Spróbuj użyć różnych wartości w funkcji "Spróbuj sam" poniżej.

Szczegóły techniczne

Domyślna wartość: ease
Inheredność: nie
Wersja: CSS3
Gramatyka JavaScript: obiekt.style.animationTimingFunction="linear"

Wsparcie przeglądarek

Liczby w tabeli wskazują pierwszą wersję przeglądarki, która w pełni obsługuje tę właściwość.

Zawierające -webkit-, -moz- lub -o- liczby oznaczają pierwszą wersję używającą prefiksu.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
43.0
4.0 -webkit-		 10.0 16.0
5.0 -moz-		 9.0
4.0 -webkit-		 30.0
15.0 -webkit-
12.0 -o-