Właściwość CSS transition-timing-function

Definicja stylu, przeznaczenie i użycie transition-timing-function

Styl transition-timing-function definiuje krzywą prędkości efektu przejścia.

Ta właściwość umożliwia zmianę szybkości efektu przejścia w czasie jego trwania.

Wartości właściwości transition-timing-function

Składnia CSS transition-timing-function

transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(int,start|end) | cubic-bezier(n,n,n,n) | initial | inherit;

Wsparcie przeglądarek dla właściwości transition-timing-function

Liczba w tabeli określa pierwszą wersję przeglądarki w pełni obsługującą tę właściwość.

Liczba przed -webkit-, -moz- i -o- określa pierwszą wersję, która działała z prefiksem.

Właściwość
transition-timing-function	26.0 4.0 -webkit-	10.0	16.0 4.0 -moz-	6.1 3.1 -webkit-	12.1 10.5 -o-

Przykładowe zastosowania właściwości transition-timing-function

Przykład 1. Efekt przejścia z tą samą prędkością od początku do końca: div { transition-timing-function: linear; } div:hover { width: 300px; } Przykład 2. Pięć różnych elementów div z 5. 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;}