animation-fill-mode ගුණය

animation-fill-mode ගුණය ආනිමේෂනය අවසානයට පසු නතර වන ස්ථානය සකසයි. පෙරනිමියෙන්, ආනිමේෂනය මුල් අගයට ආපසු යන අතර මෙය ඉතා අලංකාර නොපෙනෙන තත්ත්වයක් විය හැකිය.

වාක්‍ය රචනා ක්‍රමය

තෝරන්නා {
	animation-fill-mode: backwards | forwards | both | none;
}

අගයන්

අගය	විස්තරය
`none`	ආනිමේෂනයට ප්‍රමාදයක් සකසා තිබේ නම් - ප්‍රමාද කාලය තුළ මූලද්‍රව්‍යය එහි ස්ථානයේම පවතින අතර, පසුව පනින්නෙන් `0%` කැඩුම් රාමුවට යයි. ආනිමේෂනය අවසාන වූ පසු මූලද්‍රව්‍යය නතර වූ තත්ත්වයේ, පවතින්නේ නැත, ආරම්භක තත්ත්වයට පනින්නෙන් යයි.
`backwards`	පිටුව පූරණය වූ පසු මූලද්‍රව්‍යය `0%` කැඩුම් රාමුවට ගමන් කිරීමට බල කරයි, `animation-delay` ප්‍රමාදයක් සකසා තිබුණත්, ආනිමේෂනය ආරම්භ වන තෙක් එහි පවතිනු ඇත. ආනිමේෂනය අවසාන වූ පසු මූලද්‍රව්‍යය නතර වූ තත්ත්වයේ පවතින්නේ නැත, ආරම්භක තත්ත්වයට පනින්නෙන් යයි.
`forwards`	ආනිමේෂනය අවසාන වූ පසු මූලද්‍රව්‍යය නතර වූ තත්ත්වයේම පවතිනු ඇතැයි බ්‍රවුසරයට දක්වයි.
`both`	backwards සහ forwards යන දෙකම ඇතුළත් කරයි - පිටුව පූරණය වූ පසු මූලද්‍රව්‍යය `0%` කැඩුම් රාමුවට සකසනු ඇත, අවසානයට පසු ආනිමේෂනය නතර වූ ස්ථානයේම මූලද්‍රව්‍යය පවතිනු ඇත.

පෙරනිමි අගය: none.

උදාහරණය . none අගය

මෙම උදාහරණයේ margin-left මූලද්‍රව්‍යය සඳහා 300px අගයට සකසා ඇත, ආනිමේෂනයේ පළමු කැඩුම් රාමුව සඳහා - 0px ලෙස. animation-delay ප්‍රමාදයක් නොමැති බැවින්, පිටුව පූරණය වූ පසු මූලද්‍රව්‍යය 0px වනු ඇත, 300px නොවේ. මීට අමතරව ආනිමේෂනය අවසාන වූ පසු පනින්නෙන් ආරම්භක අගයට යයි:

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

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

#elem {
	margin-left: 300px;
	animation-fill-mode: none;
	animation-delay: 0s;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

උදාහරණය . none අගය

මෙම උදාහරණයේ margin-left මූලද්‍රව්‍යය සඳහා 300px අගයට සකසා ඇත, ආනිමේෂනයේ පළමු කැඩුම් රාමුව සඳහා - 0px ලෙස. මීට අමතරව මූලද්‍රව්‍යය සඳහා animation-delay ප්‍රමාදය 3 තත්පර ලෙස සකසා ඇත, එබැවින් මූලද්‍රව්‍යය පිටුව පූරණය වූ පසු 300px වනු ඇත, 0px නොවේ, ආනිමේෂනය ආරම්භ වීමෙන් පසු තත්පර 3 කාලයක් එහි සිටිනු ඇති අතර පසුව පනින්නෙන් 0px වෙත යනු ඇත - ආනිමේෂනය එතැන් සිට ආරම්භ වනු ඇත. මීට අමතරව, ආනිමේෂනය අවසාන වූ පසු ආරම්භක අගයට පනින්නෙන් යයි:

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

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

#elem {
	margin-left: 300px;
	animation-fill-mode: none;
	animation-delay: 0s;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

උදාහරණය . backwards අගය

මෙම උදාහරණයේ margin-left මූලද්‍රව්‍යය සඳහා 300px අගයට සකසා ඇත, ආනිමේෂනයේ පළමු කැඩුම් රාමුව සඳහා - 0px ලෙස. මීට අමතරව මූලද්‍රව්‍යය සඳහා animation-fill-mode backwards අගයෙන් සකසා ඇත, එබැවින් මූලද්‍රව්‍යය පිටුව පූරණය වූ පසු 0px වනු ඇත, 300px නොවේ, animation-fill-mode සඳහා none අගයෙන් සිටි ලෙස. මීට අමතරව, ආනිමේෂනය අවසාන වූ පසු පනින්නෙන් ආරම්භක අගයට යයි:

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

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

#elem {
	margin-left: 300px;
	animation-fill-mode: backwards;
	animation-delay: 0s;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

උදාහරණය . none අගය සහ පුනරාවර්තන ගණන 1 ට සමාන වේ

මෙම උදාහරණයේ margin-left මූලද්‍රව්‍යය සඳහා 300px අගයට සකසා ඇත, ආනිමේෂනයේ පළමු කැඩුම් රාමුව සඳහා - 0px ලෙස. මීට අමතරව මූලද්‍රව්‍යය සඳහා animation-delay ප්‍රමාදය 3 තත්පර ලෙස සකසා ඇත, එබැවින් මූලද්‍රව්‍යය පිටුව පූරණය වූ පසු 300px වනු ඇත, 0px නොවේ, ආනිමේෂනය ආරම්භ වීමෙන් පසු තත්පර 3 කාලයක් එහි සිටිනු ඇති අතර පසුව පනින්නෙන් 0px වෙත යනු ඇත - ආනිමේෂනය එතැන් සිට ආරම්භ වනු ඇත. animation-fill-mode none අගයෙන් සකසා ඇති බැවින්, ආනිමේෂනය වාදනය කිරීමෙන් පසු මූලද්‍රව්‍යය ආරම්භක අගයට ආපසු යනු ඇත:

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

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

#elem {
	margin-left: 300px;
	animation-fill-mode: none;
	animation-delay: 3s;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: 1;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

උදාහරණය . forwards අගය සහ පුනරාවර්තන ගණන 1 ට සමාන වේ

මෙම උදාහරණයේ animation-fill-mode forwards අගයෙන් සකසා ඇත, අ ආනිමේෂනයේ පුනරාවර්තන ගණන - 1 ලෙස. පසු ආනිමේෂනය වාදනය කිරීමෙන් මූලද්‍රව්‍යය ආනිමේෂනය අවසාන වූ ස්ථානයේම පවතිනු ඇත, ආරම්භක ස්ථානයට පනින්නේ නැත.

මීට අමතරව, margin-left සකසා ඇත මූලද්‍රව්‍යය සඳහා 300px අගයෙන්, අ ආනිමේෂනයේ පළමු කැඩුම් රාමුව සඳහා - 0px ලෙස. මීට අමතරව මූලද්‍රව්‍යය සඳහා animation-delay ප්‍රමාදය 3 තත්පර ලෙස සකසා ඇත, එබැවින් මූලද්‍රව්‍යය පිටුව පූරණය වූ පසු 300px වනු ඇත, 0px නොවේ, ආනිමේෂනය ආරම්භ වීමෙන් පසු තත්පර 3 කාලයක් එහි සිටිනු ඇති අතර පසුව පනින්නෙන් 0px වෙත යනු ඇත - ආනිමේෂනය එතැන් සිට ආරම්භ වනු ඇත:

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

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

#elem {
	margin-left: 300px;
	animation-fill-mode: forwards;
	animation-delay: 3s;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: 1;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

උදාහරණය . both අගය සහ පුනරාවර්තන ගණන 1 ට සමාන වේ

මෙම උදාහරණයේ animation-fill-mode both අගයෙන් සකසා ඇත, අ ආනිමේෂනයේ පුනරාවර්තන ගණන - 1 ලෙස. පසු පිටුව පූරණය වූ පසු මූලද්‍රව්‍යය ආනිමේෂනයේ පළමු කැඩුම් රාමුවේ සිටිනු ඇත (0px, නොවේ 300px), ආනිමේෂනය වාදනය කිරීමෙන් පසු මූලද්‍රව්‍යය ආනිමේෂනය අවසාන වූ ස්ථානයේම පවතිනු ඇත, ආරම්භක ස්ථානයට පනින්නේ නැත:

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

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

#elem {
	margin-left: 300px;
	animation-fill-mode: both;
	animation-delay: 3s;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: 1;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

මෙයද බලන්න

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