CSS transition-timing-function egenskab

Definition og brug

transition-timing-function egenskab definerer hastighedskurven for overgangseffekten.

Denne egenskab tillader, at overgangseffekten ændrer sin hastighed over tid.

Se også:

CSS undervisning:CSS overgang

HTML DOM referencemanual:transitionTimingFunction egenskab

Eksempel

Eksempel 1

En overgangseffekt, der starter og slutter med samme hastighed:

div
{
transition-timing-function: linear;
}

prøv det selv

CSS syntaks

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-
bezier(n,n,n,n);

Egenskabsværdi

Værdi Beskrivelse
linear Definer en overgangseffekt, der starter og slutter med samme hastighed (lig med cubic-bezier(0,0,1,1)).
ease Definer en overgangseffekt, der starter langsomt, accelererer, og slutter langsomt (cubic-bezier(0.25,0.1,0.25,1)).
ease-in Definer en overgangseffekt, der starter langsomt (lig med cubic-bezier(0.42,0,1,1)).
ease-out Definer en overgangseffekt, der slutter langsomt (lig med cubic-bezier(0,0,0.58,1)).
ease-in-out Definer en overgangseffekt, der starter og slutter langsomt (lig med cubic-bezier(0.42,0,0.58,1)).
cubic-bezier(n,n,n,n) Definer dine egne værdier i cubic-bezier-funktionen. Mulige værdier er tal mellem 0 og 1.

Tip:Test forskellige værdier i eksemplerne, så kan du bedre forstå deres funktion.

Tekniske detaljer

Standardværdi: ease
Arvbarhed: nej
Version: CSS3
JavaScript-syntaks: object.style.transitionTimingFunction="linear"

Flere eksempler

Eksempel 2

For bedre at forstå de forskellige funktioner, se de fem forskellige div-elementer med fem forskellige værdier nedenfor:

#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}

prøv det selv

Eksempel 3

Som i det tidligere eksempel, men definerer hastighedskurven med cubic-bezier:

#div1 {transition-timing-function: cubic-bezier(0,0,1,1);}
#div2 {transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {transition-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {transition-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {transition-timing-function: cubic-bezier(0.42,0,0.58,1);}

prøv det selv

browserunderstøttelse

Tal i tabellen angiver den første browserversion, der fuldt ud understøtter egenskaben.

Tal med -webkit-、-moz- eller -o- som præfiks indikerer den første version, der bruger præfikset.

Chrome IE / Edge Firefox Safari Opera
26.0
4.0 -webkit-		 10.0 16.0
4.0 -moz-		 6.1
3.1 -webkit-		 12.1
10.5 -o-