CSS3 własność animacja-timing-function
Przykłady
Od początku do końca z tą samą prędkością odtwarzania animacji:
-webkit-animation-timing-function:linear; /* Safari and Chrome */
Spróbuj »
Na dole strony znajduje się więcej przykładów.
Pomoc Browser
属性 | |||||
---|---|---|---|---|---|
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- |
definicje i instrukcje Tag
Jak animacja-timing-function Określa animacja zakończy cykl.
Prędkość filmy definicję krzywej z arkusza stylów CSS na inny określony czas.
Profil prędkości dokonywania zmian jest bardziej gładka.
Domyślnie: | łatwość |
---|---|
Dziedziczenie: | nie |
Wersja: | CSS3 |
Składnia JavaScript: | object object.style.animationTimingFunction = "linear" |
gramatyka
Matematyczna Funkcje Zastosowanie animacja-timing-function, zwany krzywą Beziera krzywa prędkości. Dzięki tej funkcji można użyć własnych wartości, albo skorzystać z jednej z poniższych wartości:
wartość | opis | test |
---|---|---|
liniowy | Animacja od początku do końca z tą samą prędkością. | test |
łatwość | Domyślnie. Anime zaczął na niskich obrotach, a następnie przyspieszenie, spowolnienie na końcu. | test |
łatwość w | Animacja rozpoczyna się w niskiej prędkości. | test |
łatwość z | Animacja na niskim końcu. | test |
łatwość in-out | Animacja początek i koniec przy niskiej prędkości. | test |
sześciennych bezier (N, N,N, N) | W funkcji sześciennych Beziera w swoich własnych wartości. Możliwe wartości to od 0-1 wartościami. |
Wskazówka: Spróbuj wykonać następujące czynności Funkcja "try" użyć innej wartości.
przykłady Online
Przykłady
W celu lepszego zrozumienia różnych wartości funkcji rozrządu, dostarcza się zestaw pięciu wartości od pięciu różnych elementach dz:
#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}
/* Firefox: */
#div1 {-moz-animation-timing-function: linear;}
#div2 {-moz-animation-timing-function: ease;}
#div3 {-moz-animation-timing-function: ease-in;}
#div4 {-moz-animation-timing-function: ease-out;}
#div5 {-moz-animation-timing-function: ease-in-out;}
/* Safari and Chrome: */
#div1 {-webkit-animation-timing-function: linear;}
#div2 {-webkit-animation-timing-function: ease;}
#div3 {-webkit-animation-timing-function: ease-in;}
#div4 {-webkit-animation-timing-function: ease-out;}
#div5 {-webkit-animation-timing-function: ease-in-out;}
Spróbuj »
Przykłady
Tak samo jak w poprzednim przykładzie, ale są zdefiniowane przez funkcję krzywej sześciennych Beziera prędkość:
#div1 {animation-timing-function: cubic-bezier(0,0,1,1;}
#div2 {animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {animation-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {animation-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {animation-timing-function: cubic-bezier(0.42,0,0.58,1);}
/* Firefox: */
#div1 {-moz-animation-timing-function: cubic-bezier(0,0,1,1;}
#div2 {-moz-animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {-moz-animation-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {-moz-animation-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {-moz-animation-timing-function: cubic-bezier(0.42,0,0.58,1);}
/* Safari and Chrome: */
#div1 {-webkit-animation-timing-function: cubic-bezier(0,0,1,1;}
#div2 {-webkit-animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {-webkit-animation-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {-webkit-animation-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {-webkit-animation-timing-function: cubic-bezier(0.42,0,0.58,1);}
Spróbuj »
Powiązane artykuły
Tutorial CSS3: CSS3 Animacja