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-direction — normal, reverse, alternate
- animation-fill-mode — forwards (শেষ অবস্থা ধরে রাখা)💡 উদাহরণ
পালসিং ও বাউন্সিং অ্যানিমেশন:
আমি পালস করছি!
আমি ফেড ইন করেছি!
🎯 আপনার কাজ (প্র্যাকটিস)
@keyframes অ্যানিমেশন ব্যবহার করে বাম থেকে স্লাইড ইন ও ফেড ইন করা একটি বক্স তৈরি করুন।
main.css
Loading...
OUTPUT
Run your code to see the output here...