Omadus transition-timing-function

Omadus transition-timing-function määrab sujube ülemineki transition muutumise kiiruse (kiirenduse). Näiteks, alguses aeglaselt, siis kiiresti, siis jälle aeglaselt jne.

Süntaks

valija {
	transition-timing-function: väärtus;
}

Väärtused

Väärtus	Kirjeldus
`ease`	Alguses aeglaselt, siis kiiresti, lõpus jälle aeglaselt.
`ease-in`	Algab aeglaselt ja kiireneb järk-järgult.
`ease-out`	Algab kiiresti ja aeglustub järk-järgult.
`ease-in-out`	Alguses aeglaselt, siis kiiresti, lõpus jälle aeglaselt. Erineb ease'ist kiiruse poolest.
`linear`	Alati sama kiirusega.
`step-start`	Animatsiooni pole, omadus võtab kohe lõpliku väärtuse.
`step-end`	Animatsiooni pole, omadus ootab aja, määratud `transition-duraton`'is, ning võtab seejärel koheselt lõpliku väärtuse.
`steps`	Omaduse väärtus muutub hüpetena.
`cubic-bezier`	Bezier'i kõver, mis võib määrata suvalise animatsiooni. Vaata Bezier'i kõverate generaatorit.

Vaikeväärtus: ease.

Erinevate väärtuste võrdlus

Hõjuta allolevatele plokkidele kursoriga, et näha kõikide ajafunktsioonide tööd:

Näide

Hõjuta plokil kursoriga - see muudab sujuvalt oma laiust 2 sekundi jooksul. Kuna on määratud väärtus ease-in, siis animatsioon algab aeglaselt ja kiireneb järk-järgult:

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

Vaata ka

omadus transition-duration,
mis määrab sujuva ülemineku kestuse
omadus transition-property,
mis määrab sujuva ülemineku jaoks omaduse nime
omadus transition-delay,
mis määrab viivituse enne sujuvat üleminekut
omadus transition,
mis on lühend sujuva ülemineku jaoks
omadus animation,
mille abil saab teha animatsiooni