@keyframes ආදේශනය
@keyframes ආදේශනය සජීවිකරණයේ
යතුරු රාමු සකසයි. යතුරු රාමුවක් යනු
අපගේ CSS මුලද්රව්යයේ විවිධ ගුණාංග, උදාහරණයක් ලෙස, පිහිටීම,
ප්රමාණය, වර්ණය සහ වෙනත්, ඒවා මුලද්රව්යයට යොදනු ලබන්නේ
නිශ්චිත කාලයකදී ය.
වාග් රීතිය
@keyframes සජීවිකරණ නාමය {
යතුරු රාමු
}
උදාහරණය
යතුරු රාමු සකසන්න:
<div id="elem"></div>
@keyframes anim {
from {
margin-left: 0px;
}
to {
margin-left: 400px;
}
}
#elem {
animation: anim 3s infinite;
border: 1px solid black;
width: 50px;
height: 50px;
}
:
උදාහරණය
දැන් අපගේ චතුරස්රය ඉහළ සිට පහළට සජීවිකරණය භාවිතයෙන් ගෙන යමු:
<div id="elem"></div>
@keyframes anim {
from {
margin-top: 0%;
}
to {
margin-top: 10%;
}
}
#elem {
animation: anim 2s infinite;
border: 1px solid black;
width: 50px;
height: 50px;
}
:
උදාහරණය
යතුරු ලක්ෂ්ය ප්රතිශත වලින් සකසමින්, සජීවිකරණය භාවිතයෙන් අපගේ හැඩයේ පළල වැඩි කරමු:
<div id="elem"></div>
@keyframes anim {
from {
width: 10%;
}
to {
width: 40%;
}
}
#elem {
animation: anim 2s infinite;
border: 1px solid black;
width: 50px;
height: 50px;
}
:
උදාහරණය
දැන් අපගේ හැඩයේ පාරදෘෂ්යතාව වෙනස් කරමු:
<div id="elem"></div>
@keyframes anim {
from {
background-color: #467CBC;
}
to {
background-color: #C2DDFD;
}
}
#elem {
animation: anim 2s infinite;
border: 1px solid black;
width: 50px;
height: 50px;
}
:
තවද බලන්න
-
CSS සජීවිකරණය සඳහා සියලු ගුණාංග
animation-name,animation-duration,animation-delay,animation-timing-function,animation-iteration-count,animation-direction,animation-fill-mode,animation-play-state,keyframes -
transition- සිනිඳු සංක්රමණ (මුලද්රව්යය මත අත තැබීමෙන් සජීවිකරණය)
