transition ගුණාංගය
transition ගුණාංගය යනු සුමට අනුක්රමණ සඳහා වන කෙටි යෙදුමක් වන අතර, එකවර
transition-duration,
transition-property,
transition-timing-function
සහ transition-delay
සැකසීමට ඉඩ සලසයි.
වාක්ය රීතිය
තෝරන්නා {
transition: අගය;
}
ගුණාංගවල අනුපිළිවෙල වැදගත් නොවේ, නමුත්
ක්රියාත්මක කිරීමේ කාලය (transition-duration)
ප්රමාදයට (transition-delay) පෙර තිබිය යුතුය.
අගයන්
අදාළ ගුණාංග බලන්න. පෙරනිමි අගය:
all 0s ease 0s.
none අගය සියලු අනුක්රමණ අවලංගු කරයි
(ඒවා ක්ෂණිකව සිදු වනු ඇත).
උදාහරණය
කොටුව මත මූසිකය සිරස් කරන්න - 3 තත්පර
කිසිවක් සිදු නොවේ (3s ප්රමාදයක් ඇත),
ඉන්පසු එය තම පළල 2 තත්පරයකින් සුමටව
වෙනස් කරනු ඇත. ඉන්පසු මූසිකය ඉවතට ගන්නේ නම්
- නැවතත් 3 තත්පර කිසිවක් සිදු නොවන අතර,
ඉන්පසු පළල මුල් අගයට සුමටව අඩු වනු ඇත:
<div id="elem"></div>
#elem {
border: 1px solid black;
transition: width 2s ease 3s;
width: 100px;
height: 50px;
}
#elem:hover {
width: 400px;
}
:
මෙයත් බලන්න
-
animationගුණාංගය,
එහි ආධාරයෙන් සජීවීකරණයක් සාදා ගත හැකිය
