Style animationTimingFunction-egenskap

Definition och användning

animationTimingFunction Bestäm animationens hastighetskurva.

Hastighetskurvor definierar tiden det tar för animationen att gå från en CSS-style till en annan.

Hastighetskurvor används för att mjukt förändra.

Exempel

Ändra animationTimingFunction-egenskapen för <div>-elementet:

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

Prova det själv

Syntax

Returnera animationTimingFunction-egenskapen:

object.style.animationTimingFunction

Ställ in animationTimingFunction-egenskapen:

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

Egenskapsvärde

Värde Beskrivning
linear Animationens hastighet är konstant från början till slut.
ease Standardvärde. Animationen börjar långsamt, accelererar sedan och slutar långsamt.
ease-in Animationen börjar långsamt.
ease-out Animationen avslutas långsamt.
ease-in-out Animationen har både en långsam början och en långsam slut.
cubic-bezier(n, n, n, n)

Definiera dina egna värden i en trefaldig Bezier-funktion.

Möjliga värden är numeriska värden från 0 till 1.
initial Sätt detta egenskapsvärde till dess standardvärde. Se initial.
inherit Inheriterar detta egenskapsvärde från föräldrelementet. Se inherit.

Tekniska detaljer

Standardvärde: ease
Returvärde: Sträng som anger elementets animation-timing-function egenskap.
CSS-version: CSS3

Webbläsarstöd

animationTimingFunction är en CSS3 (1999) egenskap.

Alla webbläsare stöder det fullt ut:

Chrome Edge Firefox Safari Opera IE
Chrome Edge Firefox Safari Opera IE
Stödjer Stödjer Stödjer Stödjer Stödjer 11

Relaterade sidor

CSS referenshandbok:animation-timing-function egenskap