transition ගුණාංගය

transition ගුණාංගය යනු සුමට අනුක්‍රමණ සඳහා වන කෙටි යෙදුමක් වන අතර, එකවර transition-duration, transition-property, transition-timing-function සහ transition-delay සැකසීමට ඉඩ සලසයි.

වාක්‍ය රීතිය

cssතෝරන්නා {
  transition: අගය;
}

ගුණාංගවල අනුපිළිවෙල වැදගත් නොවේ, නමුත් ක්‍රියාත්මක කිරීමේ කාලය (transition-duration) ප්‍රමාදයට (transition-delay) පෙර තිබිය යුතුය.

අගයන්

අදාළ ගුණාංග බලන්න. පෙරනිමි අගය: all 0s ease 0s.

none අගය සියලු අනුක්‍රමණ අවලංගු කරයි (ඒවා ක්ෂණිකව සිදු වනු ඇත).

උදාහරණය

කොටුව මත මූසිකය සිරස් කරන්න - 3 තත්පර කිසිවක් සිදු නොවේ (3s ප්‍රමාදයක් ඇත), ඉන්පසු එය තම පළල 2 තත්පරයකින් සුමටව වෙනස් කරනු ඇත. ඉන්පසු මූසිකය ඉවතට ගන්නේ නම් - නැවතත් 3 තත්පර කිසිවක් සිදු නොවන අතර, ඉන්පසු පළල මුල් අගයට සුමටව අඩු වනු ඇත:

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

css#elem {
  border: 1px solid black;
  transition: width 2s ease 3s;
  width: 100px;
  height: 50px;
}
#elem:hover {
  width: 400px;
}

Результат:

මෙයත් බලන්න