Atrybut transition-timing-function w CSS

Definicja i użycie

Atrybut transition-timing-function określa krzywą prędkości efektu przejścia.

Ta właściwość pozwala na zmianę prędkości efektu przejścia w miarę upływu czasu.

Zobacz również:

Kurs CSS:Przejścia CSS

Podręcznik HTML DOM:Atrybut transitionTimingFunction

Przykład

Przykład 1

Przejście z równą prędkością od początku do końca:

div
{
transition-timing-function: linear;
}

Spróbuj sam

Gramatyka CSS

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-
bezier(n,n,n,n);

Wartość atrybutu

Wartość Opis
linear Określ efekt przejścia z równą prędkością od początku do końca (równy cubic-bezier(0,0,1,1)).
ease Określ efekt przejścia z powolnym początkiem, następnie przyspieszonym, a następnie z powolnym końcem (cubic-bezier(0.25,0.1,0.25,1)).
ease-in Określ efekt przejścia z powolnym początkiem (równy cubic-bezier(0.42,0,1,1)).
ease-out Określ efekt przejścia z powolnym końcem (równy cubic-bezier(0,0,0.58,1)).
ease-in-out Określ efekt przejścia z powolnym początkiem i końcem (równy cubic-bezier(0.42,0,0.58,1)).
cubic-bezier(n,n,n,n) Definiuj swoje wartości w funkcji cubic-bezier. Możliwe wartości to liczby między 0 a 1.

Wskazówka:Spróbuj różnych wartości w przykładach, aby lepiej zrozumieć ich działanie.

Techniczne szczegóły

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

Więcej przykładów

Przykład 2

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

#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}

Spróbuj sam

Przykład 3

Jak w poprzednim przykładzie, ale określa się krzywą prędkości za pomocą cubic-bezier:

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

Spróbuj sam

Wsparcie przeglądarki

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

Liczby z przedrostkami -webkit-, -moz- lub -o- oznaczają pierwszą wersję używaną z przedrostkiem.

Chrome IE / Edge Firefox Safari Opera
26.0
4.0 -webkit-		 10.0 16.0
4.0 -moz-		 6.1
3.1 -webkit-		 12.1
10.5 -o-