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 মসৃণ পরিবর্তন, যা উপাদানের উপর হোভার করার সময় অ্যানিমেশন দেখায়