Atrybut przejścia stylu transitionTimingFunction

Definicja i użycie

transitionTimingFunction Atrybut określa krzywą prędkości efektu przejścia.

Ta właściwość pozwala na zmianę prędkości efektu przejścia w czasie jego trwania.

Zobacz również:

CSS Reference Manual:Atrybut transition-timing-function

Przykład

Zmiana prędkości krzywej przejścia efektu:

document.getElementById("myDIV").style.transitionTimingFunction = "linear";

Spróbuj sam

Gramatyka

Zwrócenie atrybutu transitionTimingFunction:

obiekt.style.transitionTimingFunction

Ustawienie atrybutu transitionTimingFunction:

obiekt.style.transitionTimingFunction = 
"ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier()|initial|inherit"

Wartość atrybutu

Wartość Opis
ease

Domyślna wartość. Określa efekt przejścia z powolnym rozpoczęciem, potem szybkim, a następnie powolnym zakończeniem.

Równoważne: cubic-bezier(0.25, 0.1, 0.25, 1) .
linear

Określa efekt przejścia z równoczesną prędkością od początku do końca.

Równoważne: cubic-bezier(0, 0, 1, 1) .
ease-in

Określa efekt przejścia z powolnym rozpoczęciem.

Równoważne: cubic-bezier(0.42, 0, 1, 1) .
ease-out

Określa efekt przejścia z powolnym zakończeniem.

Równoważne: cubic-bezier(0, 0, 0.58, 1) .
ease-in-out

Określa efekt przejścia z powolnym rozpoczęciem i zakończeniem.

Równoważne: cubic-bezier(0.42, 0, 0.58, 1) .
cubic-bezier(n, n, n, n)

Definiuj swoje wartości w funkcji trójkąta Béziera.

Możliwe wartości to liczby od 0 do 1.
initial Ustaw tę właściwość na jej wartość domyślną. Zobacz initial.
inherit Inherbuje tę właściwość od elementu nadrzędnego. Zobacz inherit.

Szczegóły techniczne

Domyślna wartość: ease
Wartość zwracana: ciąg znaków, który oznacza Atrybut transition-timing-function.
Wersja CSS: CSS3

Obsługa przeglądarek

Tabela zawiera numer wersji przeglądarki, która w pełni obsługuje tę właściwość.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
26.0 10.0 16.0 6.1 12.1