Back

13. CSS Animations

📘 কনসেপ্ট (থিওরি)

CSS Animations @keyframes ব্যবহার করে জটিল, বহু-ধাপ অ্যানিমেশন তৈরি করতে দেয়। **অ্যানিমেশন ডিফাইন করা:**
@keyframes slideIn { from { transform: translateX(-100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
**প্রয়োগ করা:**
.element { animation: slideIn 0.5s ease forwards; }
**অ্যানিমেশন প্রপার্টি:** - animation-name — @keyframes এর নাম - animation-duration — কতক্ষণ - animation-timing-function — গতির বক্ররেখা - animation-delay — শুরুর আগে বিলম্ব - animation-iteration-count — কতবার (বা infinite) - animation-directionnormal, reverse, alternate - animation-fill-modeforwards (শেষ অবস্থা ধরে রাখা)

💡 উদাহরণ

পালসিং ও বাউন্সিং অ্যানিমেশন:
আমি পালস করছি!
আমি ফেড ইন করেছি!

🎯 আপনার কাজ (প্র্যাকটিস)

@keyframes অ্যানিমেশন ব্যবহার করে বাম থেকে স্লাইড ইন ও ফেড ইন করা একটি বক্স তৈরি করুন।
main.css
Loading...
OUTPUT
Run your code to see the output here...