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 සම්පත,
එමගින් සජීවීකරණයක් සෑදිය හැකිය