animation-direction ගුණය

animation-direction ගුණය සජීවිකරණයේ දිශාව තීරණය කරයි. පෙරනිමියෙන් සජීවිකරණය 1 වරක් පමණක් නැවත නැවතත් ක්‍රියාත්මක වී ආරම්භක තත්වයට ආපසු යනු ඇත, ඉන්පසු, animation-delay ගුණය මගින් පමා කිරීමක් නියම කර ඇත්නම්, නියම කරන ලද කාලයක් බලා සිටිනු ඇති අතර පසුව චක්‍රය මුල සිට ආරම්භ වේ.

මෙම ගුණය මෙම හැසිරීම වෙනස් කිරීමට ඉඩ සලසයි, උදාහරණයක් ලෙස, සජීවිකරණය අවසන් වූ පසු එය අවසන් වූ ස්ථානයේම රැඳී සිටීමට හැකියාව ලබා දෙයි, ආරම්භක ස්ථානයට පැනීම නොවේ.

එසේම මෙවැනි හැසිරීමක් ද නියම කළ හැකිය: සජීවිකරණය අන්ත ස්ථානයට ගොස් ආපසු එනු ඇත (transition වල මෙන්). පහත විස්තරය බලන්න.

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

තෝරන්නා {
	animation-direction: normal | reverse | alternate | alternate-reverse;
}

ගණනයන්

ගණනය	විස්තරය
`reverse`	සජීවිකරණය ප්‍රතිලෝම දිශාවට ක්‍රියාත්මක වේ.
`alternate`	සජීවිකරණය මුලින් සෘජු දිශාවට, ඉන්පසු ප්‍රතිලෝම දිශාවට ක්‍රියාත්මක වේ (transition මෙන්).
`alternate-reverse`	සජීවිකරණය අවසාන ස්ථානයේ සිට ආරම්භක ස්ථානයට සහ නැවත ආපසු ක්‍රියාත්මක වේ. ඇත්ත වශයෙන්ම මෙය `alternate` සහ `reverse` ගණනයන් එකම බෝතලයක ඇති ආකාරයයි.
`normal`	සජීවිකරණය ආරම්භයේ සිට අවසානය දක්වා ක්‍රියාත්මක වන අතර, අවසන් වූ පසු පැනීමකින් ආරම්භක ස්ථානයට ආපසු යයි.

පෙරනිමි ගණනය: normal.

උදාහරණය

දැන් මූලද්‍රව්‍යය එක් දිශාවකට ගමන් කරනු ඇත, ඉන්පසු ආපසු එනු ඇත, මන්ද alternate ගණනය නියම කර ඇති බැවිනි. මේ සමඟ animation-duration ගුණයේ ගණනය 3 තත්පර වන අතර මෙයින් අදහස් වන්නේ "එහි" සහ "ආපසු" ගමන් 3 තත්පරයක් පවතිනු ඇති බවයි:

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

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

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

උදාහරණය

දැන් මූලද්‍රව්‍යය ප්‍රතිලෝම දිශාවට ගමන් කරනු ඇත (වමේ සිට දකුණට යාමට අවශ්‍ය නමුත් දකුණේ සිට වමට යනු ඇත):

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

@keyframes move {
	from {
		margin-left: 0;
	}
	to {
		margin-left: 400px;
	}
}
			
#elem {
	animation-direction: reverse;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

උදාහරණය

දැන් මූලද්‍රව්‍යය එහි-එහා ගමන් කරනු ඇත, නමුත් ප්‍රතිලෝම දිශාවට (වමේ සිට ආරම්භ කිරීමට අවශ්‍ය නමුත් දකුණේ සිට ආරම්භ කරනු ඇත):

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

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

#elem {
	animation-direction: alternate-reverse;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: infinite;
	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-fill-mode ගුණය,
සජීවිකරණයේ තත්වය නියම කරන
animation-play-state ගුණය,
සජීවිකරණය තාවකාලිකව නවතා තැබීමට ඉඩ සලසන
animation ගුණය,
සජීවිකරණ සඳහා කෙටි යෙදුමක් නිරූපණය කරන
@keyframes විධානය,
සජීවිකරණයේ යතුරු රාමු නියම කරන
transition සුමට සංක්‍රමණ, මූලද්‍රව්‍යයක් මතට සිටීම මත පදනම්ව සජීවිකරණයක් නිරූපණය කරන