animation ගුණය

animation ගුණය යනු ඇනිමේෂන් සඳහා වූ කෙටි ආකාරයේ ගුණයකි, එයට සියලු ඇනිමේෂන් ගුණ එකවර අර්ථ දැක්විය හැකිය: animation-name, animation-duration, animation-delay, animation-timing-function, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state.

අගයන් අනුපිළිවෙලට වැදගත් නැත, ඇනිමේෂනය ක්‍රියාත්මක වන කාලය animation-duration අනිවාර්යයෙන්ම ප්‍රමාදයට පෙර animation-delay ස්ථානගත කළ යුතුය. අනිවාර්ය ගුණ වන්නේ කෙලෙසද animation-name සහ animation-duration.

ගුණයට none අගය ද ලබා දිය හැකිය, එය ඇනිමේෂනය සම්පූර්ණයෙන්ම අක්‍රිය කරයි. මෙම අගය පෙරනිමි අගය වේ.

වාග් රීතිය

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

උදාහරණය

මෙම උදාහරණයේ දී, ඇනිමේෂනයට පෙර ප්‍රමාදයක් 3 තත්පර (සෑම නව වාරයකටම පෙර), ඉන්පසු ඇනිමේෂනය ක්‍රියාත්මක වනු ඇත 6 තත්පරයක් ඇතුළත:

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

@keyframes move {
	from {
		margin-left: 0px;
	}
	to {
		margin-left: 400px;
	}
}

#elem {
	animation: move 6s infinite 3s linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

උදාහරණය . හැකි ගැටළු

කෙටි ආකාරයෙන් ලියා ඇති ඇනිමේෂනය, එහි නම හේතුවෙන් ක්‍රියා නොකරනු ඇත. පහත ඇනිමේෂනය බලමු:

@keyframes reverse {
	from {
		left: 0;
	}
	to {
	  left: 300px;
	}
}

සැලකිල්ලට ගන්න, මම ඇනිමේෂන නම ලෙස reverse භාවිතා කරමි. පළමු බැල්මෙන්, සියල්ල හොඳය, නමුත් ඇනිමේෂනය ක්‍රියා නොකරයි, මන්ද reverse - වලංගු animation-direction ගුණය සඳහා යතුරු වචනයකි.

කෙටි ආකාරයෙන් භාවිතා කරන විට ඇනිමේෂනය ක්‍රියා නොකරනු ඇත නමෙහි වෙනත් යතුරු වචන ඇතුළත් වීමෙන්. නමුත් "සම්පූර්ණ" ආකාරයෙන් විස්තර කිරීමේදී සියල්ල හොඳින් ක්‍රියා කරයි.

animation-direction ගුණයේ යතුරු වචන-අගයන්ට, ඇනිමේෂනය කඩා දැමිය හැකි, සුමට කාර්යයන් සමඟ බැඳී ඇති යතුරු වචන, එමෙන්ම infinite, alternate, running, paused සහ යනාදී වචන ද අයත් වේ.

මෙයද බලන්න

@keyframes අණය,
ඇනිමේෂනයේ ප්‍රධාන කැඩුම් අර්ථ දක්වයි
transition සුමට මාරුවීම්, අංගයක් මත තබා ඇති ඇනිමේෂනය නිරූපණය කරයි