Sifa ya transition-timing-function

Sifa transition-timing-function inaweka kasi ya mabadiliko (mwelekeo) ya mpito laini transition. Kwa mfano, kwanza polepole, kisha haraka, kisha polepole n.k.

Syntax

kichaguli {
	transition-timing-function: thamani;
}

Thamani

Thamani	Maelezo
`ease`	Kwanza polepole, kisha haraka, mwisho tena polepole.
`ease-in`	Huanza polepole na hatua kwa hatua huharakisha.
`ease-out`	Huanza haraka na hatua kwa hatua husimama.
`ease-in-out`	Kwanza polepole, kisha haraka, mwisho tena polepole. Inatofautiana na ease kwa kasi.
`linear`	Daima kasi ile ile.
`step-start`	Hakuna animeshon, sifa huchukua thamani ya mwisho mara moja.
`step-end`	Hakuna animeshon, sifa inangojea muda, uliowekwa katika `transition-duraton`, kisha mara moja huchukua thamani ya mwisho.
`steps`	Thamani ya sifa hubadilika kwa miruko.
`cubic-bezier`	Mkunjo wa Bezier, ambao unaweza kuweka animeshon ya kiholela. Angalia kizazi cha mikunjo ya Bezier.

Thamani chaguomsingi: ease.

Kulinganisha thamani tofauti

Leta kielekezio juu ya vitalu vilivyowasilishwa hapa chini, ili kuona utendakazi wa aina zote za vitendakazi vya muda:

Mfano

Leta kielekezio juu ya kitu - kitabadilisha kwa laini upana wake kwa 2 sekunde. Kwa kuwa imewekwa thamani ease-in, basi animeshon itaanza polepole na hatua kwa hatua itaharakisha:

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

Angalia pia

sifa transition-duration,
ambayo inaweka muda wa mpito laini
sifa transition-property,
ambayo inaweka jina la sifa kwa mpito laini
sifa transition-delay,
ambayo inaweka kucheleweshwa kabla ya mpito laini
sifa transition,
ambayo ni kifupi cha mpito laini
sifa animation,
ambayo inaweza kutengeneza animeshon