animation-fill-mode প্রপার্টি

animation-fill-mode প্রপার্টি অ্যানিমেশন শেষ হওয়ার পর কোন অবস্থানে থামবে তা সেট করে। ডিফল্টভাবে অ্যানিমেশনটি এর প্রারম্ভিক মানে ফিরে যায় এবং এটি খুব সুন্দর দেখায় না।

সিনট্যাক্স

সিলেক্টর {
	animation-fill-mode: backwards | forwards | both | none;
}

মানসমূহ

মান	বর্ণনা
`none`	যদি অ্যানিমেশনের বিলম্ব সেট করা থাকে - তাহলে বিলম্বের সময়ের মধ্যে এলিমেন্টটি তার জায়গায় থাকবে, এবং তারপর লাফিয়ে `0%` ফ্রেমে চলে যাবে। অ্যানিমেশন শেষ হওয়ার পরে এলিমেন্টটি যে অবস্থানে থেমেছিল সেখানে থাকবে না, বরং প্রারম্ভিক অবস্থানে ফিরে যাবে।
`backwards`	পৃষ্ঠা লোড হওয়ার পরেই, এমনকি যদি `animation-delay` সেট করা থাকে তবুও, এলিমেন্টটিকে `0%` ফ্রেমে নিয়ে যায়, এবং অ্যানিমেশন শুরু না হওয়া পর্যন্ত সেখানে থাকতে বাধ্য করে। অ্যানিমেশন শেষ হওয়ার পরে এলিমেন্টটি যে অবস্থানে থেমেছিল সেখানে থাকবে না, বরং প্রারম্ভিক অবস্থানে ফিরে যাবে।
`forwards`	ব্রাউজারকে指示 দেয় যে অ্যানিমেশন শেষ হওয়ার পরে এলিমেন্টটি যে অবস্থানে থেমেছিল সেখানে থাকবে।
`both`	backwards এবং forwards উভয়ই অন্তর্ভুক্ত করে - পৃষ্ঠা লোড হওয়ার পর এলিমেন্টটি `0%` ফ্রেমে সেট হবে, এবং অ্যানিমেশন শেষ হওয়ার পরে এলিমেন্টটি সেখানে থাকবে যেখানে এটি থেমেছিল।

ডিফল্ট মান: none।

উদাহরণ . none মান

এই উদাহরণে, এলিমেন্টের জন্য margin-left 300px এ সেট করা হয়েছে, এবং অ্যানিমেশনের প্রথম ফ্রেমের জন্য - 0px এ। যেহেতু animation-delay কোন বিলম্ব নেই, তাই পৃষ্ঠা লোড হওয়ার পর এলিমেন্টটি 300px এ না থেকে 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;
}

উদাহরণ . none মান

এই উদাহরণে, এলিমেন্টের জন্য margin-left 300px এ সেট করা হয়েছে, এবং অ্যানিমেশনের প্রথম ফ্রেমের জন্য - 0px এ। এছাড়াও এলিমেন্টের জন্য animation-delay 3 সেকেন্ডে সেট করা হয়েছে, তাই এলিমেন্ট পৃষ্ঠা লোড হওয়ার পর 0px এ না গিয়ে 300px এ থাকবে, এবং অ্যানিমেশন শুরু হওয়ার পর 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: 3s;
	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 মানে সেট করা হয়েছে, তাই এলিমেন্ট পৃষ্ঠা লোড হওয়ার পর 300px এ না থেকে 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: 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 সেকেন্ডে সেট করা হয়েছে, তাই এলিমেন্ট পৃষ্ঠা লোড হওয়ার পর 0px এ না গিয়ে 300px এ থাকবে, এবং অ্যানিমেশন শুরু হওয়ার পর 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 সেকেন্ডে সেট করা হয়েছে, তাই এলিমেন্ট পৃষ্ঠা লোড হওয়ার পর 0px এ না গিয়ে 300px এ থাকবে, এবং অ্যানিমেশন শুরু হওয়ার পর 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 মসৃণ রূপান্তর, যা এলিমেন্টে হোভার করার উপর অ্যানিমেশন উপস্থাপন করে