কম্যান্ড @keyframes

কমান্ড @keyframes অ্যানিমেশনের কীফ্রেম নির্ধারণ করে। একটি কীফ্রেম আমাদের CSS এলিমেন্টের বিভিন্ন বৈশিষ্ট্যকে উপস্থাপন করে, উদাহরণস্বরূপ, অবস্থান, আকার, রঙ ইত্যাদি, যা নির্দিষ্ট সময়ে এলিমেন্টে প্রয়োগ করা হয়।

সিনট্যাক্স

@keyframes অ্যানিমেশনের_নাম {
	কীফ্রেম
}

উদাহরণ

কীফ্রেম নির্ধারণ করা হচ্ছে:

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

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

#elem {
	animation: anim 3s infinite;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

উদাহরণ

এবার আসুন আমাদের বর্গক্ষেত্রটিকে অ্যানিমেশনের মাধ্যমে উপর থেকে নীচে সরিয়ে নিয়ে আসি:

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

@keyframes anim {
	from {
		margin-top: 0%;
	}
	to {
		margin-top: 10%;
	}
}

#elem {
	animation: anim 2s infinite;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

উদাহরণ

আসুন শতাংশে কীফ্রেম নির্ধারণ করে অ্যানিমেশনের মাধ্যমে আমাদের আকৃতির প্রস্থ বাড়াই:

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

@keyframes anim {
	from {
		width: 10%;
	}
	to {
		width: 40%;
	}
}

#elem {
	animation: anim 2s infinite;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

উদাহরণ

এবার আসুন আমাদের আকৃতির পটভূমির রঙ পরিবর্তন করি:

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

@keyframes anim {
	from {
		background-color: #467CBC;
	}
	to {
		background-color: #C2DDFD;
	}
}

#elem {
	animation: anim 2s infinite;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

আরও দেখুন

CSS অ্যানিমেশনের জন্য সকল বৈশিষ্ট্য animation-name, animation-duration, animation-delay, animation-timing-function, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state, keyframes
transition - মসৃণ ট্রানজিশন (এলিমেন্টে হোভার করলে অ্যানিমেশন)