transition-timing-function յատկութիւնը

transition-timing-function յատկութիւնը սահմանում է փափուկ անցման transition արագութեան փոփոխութիւնը (արագացումը): Օրինակ՝ սկզբում դանդաղ, ապա արագ, ապա դանդաղ եւ այլն:

Շարահիւսութիւն

ընտրիչ {
	transition-timing-function: արժէք;
}

Արժէքներ

Արժէք	Նկարագրութիւն
`ease`	Սկզբում դանդաղ, ապա արագ, վերջում կրկին դանդաղ:
`ease-in`	Սկսում է դանդաղ եւ աստիճանաբար արագանում է:
`ease-out`	Սկսում է արագ եւ աստիճանաբար դանդաղում է:
`ease-in-out`	Սկզբում դանդաղ, ապա արագ, վերջում կրկին դանդաղ: Ease-ից տարբերվում է արագութեամբ:
`linear`	Միշտ նոյն արագութիւնը:
`step-start`	Անիմացիա չկայ, յատկութիւնը անմիջապէս ընդունում է վերջնական արժէքը:
`step-end`	Անիմացիա չկայ, յատկութիւնը սպասում է `transition-duraton`-ում սահմանված ժամանակը, ապա ակնթարթօրէն ընդունում է վերջնական արժէքը:
`steps`	Յատկութեան արժէքը փոխվում է ցատկերով:
`cubic-bezier`	Բեզիեի կոր, որը կարող է սահմանել կամայական անիմացիա: Տես Բեզիեի կորերի գեներատոր:

Լռելայն արժէքը՝ ease:

Տարբեր արժէքների համեմատութիւն

Մկնիկը տեղափոխիր ներքեւ ներկայացուած բլոկների վրայ, որպեսզի տեսնես բոլոր տեսակի ժամանակային ֆունկցիաների աշխատանքը:

Օրինակ

Մկնիկը տեղափոխիր բլոկի վրայ - այն փափուկ կերպով կփոխի իր լայնութիւնը 2 վայրկեանի ընթացքում: Քանի որ սահմանուած է ease-in արժէքը, անիմացիան կսկսի դանդաղ եւ աստիճանաբար կարագանայ:

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

Տես նաեւ

transition-duration յատկութիւնը,
որը սահմանում է փափուկ անցման տեւողութիւնը
transition-property յատկութիւնը,
որը սահմանում է յատկութեան անունը փափուկ անցման համար
transition-delay յատկութիւնը,
որը սահմանում է ուշացում փափուկ անցումից առաջ
transition յատկութիւնը,
որը փափուկ անցման համար հապավում է
animation յատկութիւնը,
որի օգնութեամբ կարելի է անիմացիա ստեղծել