transition-timing-function සම්පත

transition-timing-function සම්පත transition සුමට අනුක්රමණයේ වේග වෙනස (අඩුවීම) සකසයි. උදාහරණයක් වශයෙන්, මුලින් මන්දගාමීව, පසුව ඉක්මනින්, පසුව මන්දගාමීව සහ යනාදී වශයෙන්.

වාක්‍ය රීතිය

cssතේරුම්ගන්නා {
  transition-timing-function: අගය;
}

අගයන්

පෙරනිමි අගය: ease.

විවිධ අගයන් සසඳීම

පහත දක්වා ඇති ගොන්න ක්ලික් කරන්න, සියලු වේලා කාර්ය වර්ගවල ක්‍රියාකාරිත්වය දැක ගැනීමට:

උදාහරණය

ගොන්න ක්ලික් කරන්න - එය සුමටව වෙනස් වේ එහි පළල 2 තත්පර තුළ. මන්දයත් ease-in අගය සකසා ඇති නිසා, සජීවීකරණය මන්දගාමීව ආරම්භ වී ක්‍රමයෙන් වේගවත් වේ:

html<div id="elem"></div>

css#elem {
  border: 1px solid black;
  transition-timing-function: ease-in;
  transition-duration: 2s;
  transition-property: width;
  height: 50px;
  width: 100px;
}
#elem:hover {
  width: 400px;
}

Результат:

බලන්න