animation-name ගුණාංගය

animation-name ගුණාංගය මෙම අංගයට යෙදිය යුතු සජීවීකරණයේ (හෝ සජීවීකරණවල) නම නියම කරයි. සජීවීකරණයේ නම අර්ථ දැක්වීමේදී @keyframes විධානය සමඟ නියම කරන ලද නමට සමාන විය යුතුය.

වාක්‍ය රචනය

තෝරන්නා {
	animation-name: සජීවීකරණයේ නම;
}

නිදර්ශනය

මෙම නිදර්ශනයේ, සජීවීකරණයේ නම move වේ:

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

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

#elem {
	animation-name: move;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

මෙයද බලන්න

animation-duration ගුණාංගය,
සජීවීකරණයේ කාල සීමාව නියම කරයි
animation-delay ගුණාංගය,
සජීවීකරණය ආරම්භ කිරීමට පෙර ප්‍රමාදය නියම කරයි
animation-timing-function ගුණාංගය,
සජීවීකරණය සිදු කිරීමේ වේගය නියම කරයි
animation-iteration-count ගුණාංගය,
සජීවීකරණයේ පුනරාවර්තන ගණන නියම කරයි
animation-direction ගුණාංගය,
සජීවීකරණයේ දිශාව නියම කරයි
animation-fill-mode ගුණාංගය,
සජීවීකරණයේ තත්ත්වය නියම කරයි
animation-play-state ගුණාංගය,
සජීවීකරණය තාවකාලිකව නතර කිරීමට ඉඩ සලසයි
animation ගුණාංගය,
සජීවීකරණ සඳහා කෙටි යෙදුමකි
@keyframes විධානය,
සජීවීකරණයේ යතුරු රාමු අර්ථ දක්වයි
transition සුමට අනුක්‍රමණ, අංගයක් මත දර්ශකය තබන විට සිදුවන සජීවීකරණයකි