Style animationTimingFunction egenskab

definition og brug

animationTimingFunction definer animationens hastighedskurve.

hastighedskurver definerer tiden for, hvor lang tid animationen tager fra en række CSS-stilarter til en anden.

hastighedskurver bruges til at glatte ud ændringer.

eksempel

ændr <div>-elementets animationTimingFunction egenskab:

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

prøv det selv

syntaks

returner animationTimingFunction egenskab:

object.style.animationTimingFunction

sæt animationTimingFunction egenskab:

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

egenskabsværdi

værdi beskrivelse
linear animation har samme hastighed fra start til slut.
ease standardværdi. Animation starter langsomt, accelererer derefter og afsluttes langsomt.
ease-in animation starter langsomt.
ease-out animation afsluttes langsomt.
ease-in-out animation har både en langsom begyndelse og en langsom afslutning.
cubic-bezier(n, n, n, n)

definer dine egne værdier i en tredobbelt Bezier-funktion.

mulige værdier er numeriske værdier fra 0 til 1.
initial sæt denne egenskab til dens standardværdi. Se initial.
inherit arver denne egenskab fra sin forældrelement. Se inherit.

tekniske detaljer

standardværdi: ease
returnerværdi: streng, der repræsenterer elementets animation-timing-function egenskab.
CSS version: CSS3

browserstøtte

animationTimingFunction er en CSS3 (1999) egenskab.

alle browsere understøtter det fuldt ud:

Chrome Edge Firefox Safari Opera IE
Chrome Edge Firefox Safari Opera IE
støtte støtte støtte støtte støtte 11

relaterede sider

CSS reference manual:animation-timing-function egenskab