config

Style CSS

Spis alfabetyczny stylów CSS.

Ściąga CSS - przykłady, style CSS alfabetycznie, spis stylów CSS, właściwości CSS, skorowidz stylów CSS.


 

Strona w trakcie modernizacji

Zapraszamy wkrótce

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

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

Funkcja pomiaru czasu animacji definiuje krzywą szybkości animacji. Krzywa prędkości określa CZAS, po jakim animacja zmienia jeden zestaw stylów CSS na inny.

Krzywa prędkości służy do płynnego wprowadzania zmian.

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

-
Wartość Opis
linear Animacja ma tę samą prędkość od początku do końca.
ease Animacja zaczyna się powoli, następnie szybko i powoli, gdy się kończy. Domyślna wartość.
ease-in Animacja zaczyna się powoli.
ease-out Animacja ma powoli się kończy.
ease-in-out Animacja ma zarówno powolny początek, jak i koniec.
step-start Odpowiednik kroków (1, start).
step-end Odpowiednik kroków (1, end).
steps(int,start | end) Określa funkcję krokową z dwoma parametrami. Pierwszy parametr określa liczbę interwałów w funkcji. Powinna to być dodatnia liczba całkowita (większa niż 0). Drugi opcjonalny parametr to wartość "start" lub "end" i określa punkt, w którym następuje zmiana wartości w przedziale. Jeśli drugi parametr zostanie pominięty, otrzymuje wartość "end".
cubic-bezier(n,n,n,n) Określa własne wartości w funkcji cubic-bezier. Możliwe są liczbowe wartości od 0 do 1.
initial Ustawia tę właściwość na jej wartość domyślną.
inherit Dziedziczy tę właściwość z elementu nadrzędnego.

Składnia CSS animation-timing-function

animation-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 animation-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-, -o- określa pierwszą wersję, która działała z prefiksem.

Właściwość chrome edge firefox safari opera
animation-timing-function 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-

 

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

Kliknij wartości właściwości poniżej, aby zobaczyć wynik.

 

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

Result:
 
Kod CSS:
#myDIV {
animation-timing-function:linear;
}
 

 

Przykłady właściwości animation-timing-function

 

Witold Czuba Tworzenie stron Warszawa, Wrocław i Legnica | Grafik | Strony , , Marynarska 54, 59-220, Legnica, dolnośląskie, Polska, tel. +48 780 060 995, Pon. - pt. 8:00 - 17:00

 

 

Witold Czuba

Tworzenie stron Warszawa, Wrocław i Legnica | Grafik | Strony

Marynarska 54
59-220, Legnica,
dolnośląskie, Polska,
tel. +48 780 060 995,
Pon. - pt. 8:00 - 17:00