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