Opis

transition-timing-function określa krzywą prędkości efektu przejścia.

Zobacz też skrót: transition

Przykład
wskaż
mnie...
Kod:
Wartości

transition-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;

WartośćOpis
ease Domyślna wartość. Przejście rozpoczyna się powoli, następnie postępuje szybko i ponownie powoli - kończy. Równoważny cubic-bezier(0.25,0.1,0.25,1).
ease-in Powolny start. Równoważny cubic-bezier(0.42,0,1,1).
ease-out Powolny koniec. Równoważny cubic-bezier(0,0,0.58,1).
ease-in-out Powolny i start i koniec. Równoważny cubic-bezier(0.42,0,0.58,1)
linear Równomierne tempo całej animacji. Równoważny cubic-bezier(0,0,1,1).
steps (int, start | end)
steps(3) |  steps(3, start)
Określa funkcję krokową z dwoma parametrami. Pierwszy parametr określa liczbę interwałów w funkcji. Musi to być liczba naturalna większa niż 0. Drugi parametr (opcjonalny) to wartość „start” lub „end”. Określa styl klatki po skoku (początku czy końca przedziału).
step-start jak steps(1, start)
step-end jak steps(1, end)
cubic-bezier (n,n,n,n) Zdefiniuj własne wartości w cubic-bezier funkcji. Możliwe wartości to wartości liczbowe od 0 do 1. Zobacz
initial Ustawia tę właściwość na wartość domyślną.
inherit Dziedziczy tę właściwość po elemencie nadrzędnym.
Przykłady:   |     |     |     
Info: Domyślna wartość: ease
Dziedziczenie:
Animowalność:
JavaScript: object.style.transitionTimingFunction