CSS Animation কি এবং কিভাবে কাজ করে?
CSS Keyframes একটি অত্যন্ত কার্যকর ও শক্তিশালী টুল, যা ওয়েব পেজে সফট ও ইন্টার্যাকটিভ অ্যানিমেশন তৈরি করতে ব্যবহৃত হয়। এর মাধ্যমে আপনি একটি অ্যানিমেশনের প্রতিটি ধাপে কী পরিবর্তন ঘটবে—তা নির্দিষ্টভাবে সংজ্ঞায়িত করতে পারেন।
আধুনিক ওয়েব ডিজাইনে অ্যানিমেশন একটি গুরুত্বপূর্ণ উপাদান হয়ে উঠেছে। অনেক সময়ই দেখা যায়, বিভিন্ন উপাদান—যেমন: বক্স, চিত্র বা টেক্সট—নড়ছে, অবস্থান বদলাচ্ছে কিংবা রঙ ও আকার পরিবর্তন করছে। এসব দৃশ্যের পেছনে মূল চালিকা শক্তি হচ্ছে CSS Animation।
📌 CSS Animation কি?
CSS Animation ব্যবহার করে আমরা HTML এর যেকোনো এলিমেন্টকে সুন্দরভাবে নড়াচড়া করাতে, রঙ পরিবর্তন করাতে, কিংবা আকার বড়-ছোট করতে পারি। এর জন্য দরকার হয় দুটি জিনিস:
@keyframes– এটা বলে দেয় অ্যানিমেশনের ধাপে ধাপে কী হবে।CSS
animationপ্রপার্টিগুলো – এটা বলে দেয় কত সময়, কতবার, কীভাবে অ্যানিমেশন চলবে।
💻 প্রজেক্ট: একটি গোল বক্সকে ঘোরানো এবং রঙ পরিবর্তন
আমরা এমন একটি গোল বক্স বানাবো, যেটি চারকোণে ঘুরবে এবং প্রতিবার রঙ ও বর্ডার বদলাবে।
✅ HTML কোড
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Animation</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="box"></div>
</body>
</html>
✅ CSS কোড (style.css)
* {
margin: 0;
padding: 0;
}
.box {
width: 50px;
height: 50px;
margin: 50px auto;
background-color: brown;
border: 5px solid black;
border-radius: 50%;
position: relative;
animation: boxMove 4.5s ease-in-out 1s infinite alternate-reverse both;
}
@keyframes boxMove {
0% { left: 0; top: 0; background-color: black; border: 5px solid white; }
25% { left: 200px; top: 0; background-color: brown; border: 5px solid black; }
50% { left: 200px; top: 200px; background-color: chartreuse; border: 5px solid brown; }
75% { left: 0; top: 200px; background-color: teal; border: 5px solid chartreuse; }
100% { left: 0; top: 0; background-color: yellowgreen; border: 5px solid teal; }
}
🧠 এই কোডে কী হচ্ছে?
| বিষয় | কাজ |
.box | এটি একটি গোল বক্স (৫০x৫০ px) |
border-radius: 50% | এটিকে গোল বানায় |
position: relative | এটাকে চলাফেরা করতে সাহায্য করে |
animation: boxMove ... | এই লাইন অ্যানিমেশন চালু করে |
🎞️ @keyframes boxMove কী করে?
এটি ৫টি ধাপ তৈরি করেছে:
০% – বক্স উপরে ও বামে, কালো রঙ, সাদা বর্ডার
২৫% – ডানে যায়, বাদামি রঙ
৫০% – ডান নিচে যায়, সবুজ রঙ
৭৫% – বামে আসে, গাঢ় সবুজ রঙ
১০০% – আবার শুরুতে ফিরে আসে, হালকা সবুজ রঙ
🔄 Animation এর অন্যান্য Option ব্যাখ্যা
| প্রপার্টি | মান | কাজ |
animation-duration | 4.5s | অ্যানিমেশন কত সেকেন্ড চলবে |
animation-delay | 1s | শুরু হওয়ার আগে কতক্ষণ অপেক্ষা করবে |
animation-timing-function | ease-in-out | ধীরে শুরু এবং ধীরে শেষ |
animation-iteration-count | infinite | বারবার চলবে |
animation-direction | alternate-reverse | একবার সামনে, একবার উল্টো |
animation-fill-mode | both | শুরু ও শেষে স্টাইল ধরে রাখবে |
🎁 ফলাফল কেমন হবে?
একটি ছোট গোল বক্স ৪টি দিক ঘুরে বেড়াবে, আর প্রতিবার ভিন্ন রঙ ও বর্ডার নিয়ে আসবে। এটি স্বয়ংক্রিয়ভাবে বারবার চলবে। কেবল CSS দিয়েই এমন মজার অ্যানিমেশন করা যায়!
