animation-iteration-count ගුණය
animation-iteration-count ගුණය
සජීවීකරණය පුනරාවර්තනය වන ගණන සකසයි. පෙරනිමියෙන්
සජීවීකරණය 1 වතාවක් පමණක් පුනරාවර්තනය වී
ඉන්පසු එය ආරම්භක තත්වයට ආපසු යයි.
අපගේ ගුණය, කෙසේ වෙතත්, නිශ්චිත
පුනරාවර්තන ගණනක් සැකසීමට හෝ සරලවම
අනන්ත පුනරාවර්තනයක් සැකසීමට ඉඩ සලසයි.
වාක්ය රචනය
තෝරන්නා {
animation-iteration-count: පූර්ණ සංඛ්යාවක් හෝ භාගික සංඛ්යාවක් | infinite;
}
අගයන්
| අගය | විස්තරය |
|---|---|
| සංඛ්යාව |
සැකසූ පුනරාවර්තන ගණන, ඒවා සම්පූර්ණ වූ පසු සජීවීකරණය නතර වේ.
එය ගන්නා ස්ථානය, පාලනය කරනු ලබන්නේ
animation-fill-mode
ගුණය මගිනි.
භාගික අගයන් සැකසිය හැකිය - මෙම අවස්ථාවේදී සජීවීකරණය ක්රියාත්මක වන්නේ
අර්ධ වශයෙන් පමණි.
|
infinite |
සජීවීකරණය අනන්තවත් පුනරාවර්තනය වේ. |
පෙරනිමි අගය: 1.
උදාහරණය . සීමිත පුනරාවර්තන ගණන
මෙම උදාහරණයේ දී සජීවීකරණය පුනරාවර්තනය වන්නේ
3 වතාවක් පමණක් වන අතර, ඉන්පසු එය ආරම්භක
තත්වයට ආපසු යයි:
<div id="elem"></div>
@keyframes move {
from {
margin-left: 0;
}
to {
margin-left: 400px;
}
}
#elem {
animation-duration: 3s;
animation-name: move;
animation-iteration-count: 3;
animation-timing-function: linear;
border: 1px solid black;
width: 50px;
height: 50px;
}
:
උදාහරණය . infinite අගය
දැන් සජීවීකරණය අනන්තවත් පුනරාවර්තනය වේ:
<div id="elem"></div>
@keyframes move {
from {
margin-left: 0px;
}
to {
margin-left: 400px;
}
}
#elem {
animation-duration: 3s;
animation-name: move;
animation-iteration-count: infinite;
animation-timing-function: linear;
border: 1px solid black;
width: 50px;
height: 50px;
}
:
මෙයද බලන්න
-
animation-nameගුණය,
සජීවීකරණයේ නම සකසයි -
animation-durationගුණය,
සජීවීකරණයේ කාල සීමාව සකසයි -
animation-delayගුණය,
සජීවීකරණය ආරම්භ කිරීමට පෙර විලම්බය සකසයි -
animation-timing-functionගුණය,
සජීවීකරණය ක්රියාත්මක වන වේගය සකසයි -
animation-directionගුණය,
සජීවීකරණයේ දිශාව සකසයි -
animation-fill-modeගුණය,
සජීවීකරණයේ තත්වය සකසයි -
animation-play-stateගුණය,
සජීවීකරණය තාවකාලිකව නතර කිරීමට ඉඩ සලසයි -
animationගුණය,
සජීවීකරණ සඳහා කෙටි යෙදුමක් වේ -
@keyframesවිධානය,
සජීවීකරණයේ මූලික රාමු නිර්වචනය කරයි -
transitionසුමට සංක්රාන්ති, අංගයක් මත රූපසටහනක් තබන විට ක්රියාත්මක වන සජීවීකරණයකි
