CSS transition-timing-function eigenschap

Definitie en gebruik

De transition-timing-function-eigenschap specificeert de snelheidskromme van het overgangseffect.

Deze eigenschap laat het overgangseffect veranderen in snelheid door de tijd heen.

Zie ook:

CSS handleiding:CSS overgang

HTML DOM referentiemanual:transitionTimingFunction-eigenschap

Voorbeeld

Voorbeeld 1

Een overgangseffect met dezelfde snelheid van begin tot einde:

div
{
transition-timing-function: linear;
}

probeer het zelf

CSS syntaxis

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

Eigenschapswaarde

Waarde Beschrijving
linear Specificeer een overgangseffect dat met dezelfde snelheid begint en eindigt (gelijk aan cubic-bezier(0,0,1,1)).
gemakkelijk Specificeer een overgangseffect dat traag begint, dan versnelt, en vervolgens traag eindigt (cubic-bezier(0.25,0.1,0.25,1)).
ease-in Specificeer een overgangseffect dat traag begint (gelijk aan cubic-bezier(0.42,0,1,1)).
ease-out Specificeer een overgangseffect dat traag eindigt (gelijk aan cubic-bezier(0,0,0.58,1)).
ease-in-out Specificeer een overgangseffect dat traag begint en eindigt (gelijk aan cubic-bezier(0.42,0,0.58,1)).
cubic-bezier(n,n,n,n) Definieer je eigen waarden in de cubic-bezier-functie. Mogelijke waarden zijn getallen tussen 0 en 1.

Tip:Test verschillende waarden in de voorbeelden, zodat je beter kunt begrijpen hoe ze werken.

technische details

standaardwaarde: gemakkelijk
inheritance: nee
versie: CSS3
JavaScript syntaxis: object.style.transitionTimingFunction="linear"

Meer voorbeelden

Voorbeeld 2

Om beter te begrijpen welke waarden de verschillende functies hebben, zie hier vijf verschillende div-elementen met vijf verschillende waarden:

#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;}

probeer het zelf

Voorbeeld 3

Zoals in het vorige voorbeeld, maar met cubic-bezier om de snelheidskromme te definiëren:

#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);}

probeer het zelf

Browserondersteuning

De cijfers in de tabel vermelden de eerste browserversie die de eigenschap volledig ondersteunt.

Cijfers met -webkit-, -moz- of -o- voorafgaand aan het getal betekenen de eerste versie met het voorvoegsel.

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-