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.


 

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

 

 

100% pozytywnych opinii w Google – 15 lat doświadczenia przy tworzeniu stron

Opinie umieszczone w Google są niezależne. Nie ma możliwości ich usunięcia, czy też zmiany treści. Można na nie jedynie odpowiedzieć. Są one wiarygodne, gdyż nie można nimi manipulować.

 

 

 

100% pozytywnych opinii w Google – 15 lat doświadczenia przy tworzeniu stron

Opinie umieszczone w Google są niezależne. Nie ma możliwości ich usunięcia, czy też zmiany treści. Można na nie jedynie odpowiedzieć. Są one wiarygodne, gdyż nie można nimi manipulować.

 

 

 

Obszar działalności – tworzenie stron internetowych w miastach:

Obszar działalności
Tworzenie stron internetowych w miastach:

Witold Czuba Tworzenie stron Warszawa, Wrocław i Legnica | Teksty SEO pozycjonujące strony | Grafika na strony internetowe | Mapa strony | Polityka prywatności
Adres:, Marynarska 54, 59-220, Legnica, dolnośląskie, Polska, tel.: +48 780 060 995, pon. - czw. 8:00 - 16:00

 

Witold Czuba

Tworzenie stron Warszawa, Wrocław i Legnica | Teksty SEO pozycjonujące strony | Grafika na strony internetowe | Mapa strony | Polityka prywatności

Marynarska 54, 59-220 Legnica,, dolnośląskie, Polska,
tel.: +48 780 060 995,
pon. - czw. 8:00 - 16:00