Ominaisuus animation-timing-function

Ominaisuus animation-timing-function asettaa animaation muutosnopeuden (kiihtyvyyden). Esimerkiksi aluksi hitaasti, sitten nopeasti, sitten hitaasti jne.

Syntaksi

Arvot

Arvo	Kuvaus
ease	Aluksi hitaasti, sitten nopeasti, lopussa taas hitaasti.
ease-in	Alkaa hitaasti ja kiihtyy vähitellen.
ease-out	Alkaa nopeasti ja hidastuu vähitellen pysähtyen.
ease-in-out	Aluksi hitaasti, sitten nopeasti, lopussa taas hitaasti. Eroaa easesta nopeudessa.
linear	Aina sama nopeus.
step-start	Ei animaatiota, ominaisuus saa välittömästi lopullisen arvon.
step-end	Ei animaatiota, ominaisuus odottaa animation-duraton -ominaisuudessa asetetun ajan, ja ottaa sitten välittömästi lopullisen arvon.
steps	Ominaisuuden arvo muuttuu hyppäyksittäin.
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:

Katso myös