CSS3 własność przejścia-timing-function
Przykłady
Przejścia z taką samą prędkością od początku do końca:
transition-timing-function: linear;
-webkit-transition-timing-function: linear; /* Safari and Chrome */
-webkit-transition-timing-function: linear; /* Safari and Chrome */
Spróbuj »
Pomoc Browser
Wartości podane w tabeli przedstawiają pierwszą przeglądarką obsługującą numer wersji obiektu.
Natychmiast po -webkit- cyfrowego -ms- lub -moz- temu w uzasadnieniu przedrostka atrybutu pierwszy numer wersji przeglądarki.
属性 | |||||
---|---|---|---|---|---|
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- |
Atrybut definicje i instrukcje
Obiekt przejściowy-timing-function określa prędkość efektu przejścia.
Ta właściwość pozwala efekt przejścia, aby zmienić szybkość jej trwania.
Domyślnie: | łatwość |
---|---|
Dziedziczenie: | nie |
Wersja: | CSS3 |
Składnia JavaScript: | object .style.transitionTimingFunction = "linear" |
gramatyka
transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);
wartość | opis |
---|---|
liniowy | Przepisy z taką samą prędkością, aby rozpocząć końców efekt przejścia (równe sześciennych Beziera (0,0,1,1)). |
łatwość | Rezerwa powolny start, potem coraz szybciej, to wolniej koniec efektów przejścia (sześciennych Beziera (0.25,0.1,0.25,1)). |
łatwość w | Przepisy przejściowe do efektu powolnego startu (równej sześciennych Beziera (0.42,0,1,1)). |
łatwość z | Przepisy do końca wolnych efektów przejścia (odpowiednik sześciennych Beziera (0,0,0.58,1)). |
łatwość in-out | Przepisy przejściowe w efekcie powoli zaczyna się i kończy (równe sześciennych Beziera (0.42,0,0.58,1)). |
sześciennych bezier (N, N,N, N) | Zdefiniować własne wartości w funkcji sześciennych Beziera. Możliwa wartość to liczba z przedziału 0-1. |
Wskazówka: Spróbuj różne wartości w przykładach poniżej, aby zrozumieć, jak to działa!
Więcej przykładów
Przykłady
Aby lepiej zrozumieć funkcjonowanie różnych wartościach: Istnieje pięć różnych elementów div, z pięcioma 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;}
/* Safari */
#div1 {-webkit-transition-timing-function: linear;}
#div2 {-webkit-transition-timing-function: ease;}
#div3 {-webkit-transition-timing-function: ease-in;}
#div4 {-webkit-transition-timing-function: ease-out;}
#div5 {-webkit-transition-timing-function: ease-in-out;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}
/* Safari */
#div1 {-webkit-transition-timing-function: linear;}
#div2 {-webkit-transition-timing-function: ease;}
#div3 {-webkit-transition-timing-function: ease-in;}
#div4 {-webkit-transition-timing-function: ease-out;}
#div5 {-webkit-transition-timing-function: ease-in-out;}
Spróbuj »
Przykłady
A powyższy przykład, ale określa Siła docisku funkcję Baziera:
#div1 {transition-timing-function: cubic-bezier(0,0,1,1;}
#div2 {transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {transition-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {transition-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {transition-timing-function: cubic-bezier(0.42,0,0.58,1);}
/* Safari */
#div1 {-webkit-transition-timing-function: cubic-bezier(0,0,1,1;}
#div2 {-webkit-transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {-webkit-transition-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {-webkit-transition-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {-webkit-transition-timing-function: cubic-bezier(0.42,0,0.58,1);}
#div2 {transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {transition-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {transition-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {transition-timing-function: cubic-bezier(0.42,0,0.58,1);}
/* Safari */
#div1 {-webkit-transition-timing-function: cubic-bezier(0,0,1,1;}
#div2 {-webkit-transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {-webkit-transition-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {-webkit-transition-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {-webkit-transition-timing-function: cubic-bezier(0.42,0,0.58,1);}
Spróbuj »