Przykład
Zmienić krzywiznę z efektami prędkość:
document.getElementById("myDIV").style.transitionTimingFunction = "linear";
Spróbuj sam " Definicja i Wykorzystanie
Właściwość transitionTimingFunction określa krzywiznę efektami prędkości.
Ta właściwość pozwala efekt przejściowy, aby zmienić prędkość na czas jego trwania.
Wsparcie przeglądarka
Nieruchomość transitionTimingFunction jest obsługiwana w programie Internet Explorer 10, Firefox, Opera i Chrome.
Safari obsługuje alternatywę, właściwość WebkitTransitionTimingFunction.
Uwaga: Właściwość transitionTimingFunction nie jest obsługiwana w programie Internet Explorer 9 i wcześniejszych wersjach.
Składnia
Zwraca właściwość transitionTimingFunction:
object .style.transitionTimingFunction Ustaw właściwość transitionTimingFunction:
object .style.transitionTimingFunction ="ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier()|
initial|inherit"
wartości nieruchomości
| Wartość | Opis |
|---|---|
| ease | Domyślna wartość. Określa efekt przejściowy o powolnym początku, a następnie szybko, a potem kończy się powoli (equivalent to cubic- bezier(0.25,0.1,0.25,1) ) |
| linear | Określa efekt przejścia z tą samą prędkością, od początku do końca (equivalent to cubic- bezier(0,0,1,1) ) |
| ease-in | Określa efekt przejściowy o powolnym tempem (odpowiednik cubic- bezier(0.42,0,1,1) ) |
| ease-out | Określa efekt przejścia z wolnym końcem (odpowiednik cubic- bezier(0,0,0.58,1) ) |
| ease-in-out | Określa efekt przejściowy o powolnym początkowego i końcowego (odpowiednik cubic- bezier(0.42,0,0.58,1) ) |
| cubic- bezier( n , n , n , n ) | Definiowanie własnych wartości w funkcji sześciennych Beziera. Możliwe wartości to wartości liczbowe od 0 do 1 |
| initial | Ustawia tę właściwość na wartość domyślną. Przeczytaj o początkowy |
| inherit | Dziedziczy nieruchomość od swojego rodzica. Przeczytaj o dziedziczyć |
Szczegóły techniczne
| Domyślna wartość: | łatwość |
|---|---|
| Zwracana wartość: | Ciąg, co stanowi właściwość przejściowy czas-funkcyjnego elementu |
| Wersja CSS | CSS3 |
Podobne strony
Odniesienie CSS transition-timing-function property
<Style obiektu