Ominaisuus transition-timing-function

Ominaisuus transition-timing-function asettaa transition-siirtymän muutosnopeuden (kiihdytyksen). Esimerkiksi ensin hitaasti, sitten nopeasti, sitten hitaasti jne.

Syntaksi

valitsin {
	transition-timing-function: arvo;
}

Arvot

Arvo	Kuvaus
`ease`	Ensin hitaasti, sitten nopeasti, lopussa taas hitaasti.
`ease-in`	Alkaa hitaasti ja kiihtyy vähitellen.
`ease-out`	Alkaa nopeasti ja pysähtyy vähitellen.
`ease-in-out`	Ensin hitaasti, sitten nopeasti, lopussa taas hitaasti. Eroaa easesta nopeudella.
`linear`	Aina sama nopeus.
`step-start`	Ei animaatiota, ominaisuus saa välittömästi lopullisen arvon.
`step-end`	Ei animaatiota, ominaisuus odottaa `transition-duraton`:ssa asetetun ajan, ja ottaa sitten välittömästi lopullisen arvon.
`steps`	Ominaisuuden arvo muuttuu hyppäyksin.
`cubic-bezier`	Bezier-käyrä, joka voi määrittää mielivaltaisen animaation. Katso Bezier-käyrägeneraattori.

Oletusarvo: ease.

Eri arvojen vertailu

Vie hiiri alla olevien lohkojen päälle nähdäksesi kaikkien aikafunktiotyypien toiminnan:

Esimerkki

Vie hiiri lohkon päälle - se muuttaa sulavasti leveyttään 2 sekunnissa. Koska arvo on asetettu ease-in, animaatio alkaa hitaasti ja kiihtyy vähitellen:

<div id="elem"></div>

#elem {
	border: 1px solid black;
	transition-timing-function: ease-in;
	transition-duration: 2s;
	transition-property: width;
	height: 50px;
	width: 100px;
}
#elem:hover {
	width: 400px;
}

Katso myös

ominaisuus transition-duration,
joka asettaa sulavan siirtymän keston
ominaisuus transition-property,
joka asettaa sulavan siirtymän ominaisuuden nimen
ominaisuus transition-delay,
joka asettaa viiveen ennen sulavaa siirtymää
ominaisuus transition,
joka on lyhenne sulavalle siirtymälle
ominaisuus animation,
jolla voi tehdä animaation