Opis

animation-timing-function określa krzywą animacji prędkości.

Krzywa prędkości określa czas, którego animacja używa do zmiany jednego zestawu stylów CSS na inny. Służy do płynnego wprowadzania zmian.

Zobacz też inne własności animation

Przykład
Kod:
Wartości

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;

WartośćOpis
ease Domyślna wartość. Animacja rozpoczyna się powoli, następnie postępuje szybko i ponownie powoli - kończy.
ease-in Powolny start.
ease-out Powolny koniec.
ease-in-out Powolny i start i koniec.
linear Równomierne tempo całej animacji.
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. Porównaj
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.animationTimingFunction