Atrybut Style animationTimingFunction

Definicja i użycie

animationTimingFunction Określ krzywą prędkości animacji.

Krzywe prędkości definiują czas, w którym animacja przechodzi od jednego zestawu CSS do innego.

Krzywe prędkości służą do gładkich zmian.

Przykład

Zmiana atrybutu animationTimingFunction elementu <div>:

document.getElementById("myDIV").style.animationTimingFunction = "linear";

Spróbuj sam

Gramatyka

Zwrócenie atrybutu animationTimingFunction:

object.style.animationTimingFunction

Ustawienie atrybutu animationTimingFunction:

object.style.animationTimingFunction = "linear|ease|ease-in|ease-out|cubic-bezier(n, n, n, n)|initial|inherit"

Wartość atrybutu

Wartość Opis
linear Tempo animacji jest takie samo od początku do końca.
ease Domyślna wartość. Animacja zaczyna się powoli, potem przyspiesza, a następnie kończy się powoli.
ease-in Animacja zaczyna się powoli.
ease-out Animacja kończy się powoli.
ease-in-out Animacja ma powolny początek i zakończenie.
cubic-bezier(n, n, n, n)

Definiuj swoje wartości w funkcji trójkątnego Béziera.

Możliwe wartości to liczby od 0 do 1.
initial Ustaw tę właściwość na jej wartość domyślną. Zobacz initial.
inherit Dziedziczy tę właściwość od elementu nadrzędnego. Zobacz inherit.

Szczegóły techniczne

Domyślna wartość: ease
Wartość zwracana: Ciąg znaków, który reprezentuje Atrybut animation-timing-function.
Wersja CSS: CSS3

Wspieranie przeglądarek

animationTimingFunction jest cechą CSS3 (1999).

Wszystkie przeglądarki wspierają je w pełni:

Chrome Edge Firefox Safari Opera IE
Chrome Edge Firefox Safari Opera IE
Wspierane Wspierane Wspierane Wspierane Wspierane 11

Powiązane strony

CSS Reference Manual:Atrybut animation-timing-function