যখন ট্রানজিশন দুটি অবস্থার মধ্যে অ্যানিমেট করে, @keyframes অ্যানিমেশন একটি বহু-ধাপের ক্রম সংজ্ঞায়িত করে যা স্বয়ংক্রিয়ভাবে চলতে পারে, লুপ করতে পারে এবং অনেক মধ্যবর্তী অবস্থার মধ্য দিয়ে যেতে পারে।
slide-in {
{ : (-); : ; }
{ : (); : ; }
}
{
: slide-in ease-out;
}
@keyframes bounce {
0% { transform: translateY(0); }
50% { transform: translateY(-30px); } /* peak of the bounce */
100% { transform: translateY(0); }
}
শতাংশগুলি আপনাকে একটি অ্যানিমেশনে বিভিন্ন পর্যায়ে কোরিওগ্রাফ করতে দেয় — একটি সাধারণ ট্রানজিশনের সাথে অসম্ভব।
.spinner {
animation: spin 1s linear infinite;
/* │ │ │ └── iteration-count (infinite = loop forever) */
/* │ │ └───────── timing function */
/* │ └────────────── duration */
/* └─────────────────── @keyframes name */
}
@keyframes spin { to { transform: rotate(360deg); } } /* classic loading spinner */
অন্যান্য বৈশিষ্ট্য: animation-delay, animation-direction: alternate (পিং-পং), animation-fill-mode: forwards (চূড়ান্ত অবস্থা রাখুন), animation-play-state: paused।
/* ✅ GPU-composited, 60fps */
@keyframes good { to { transform: scale(1.1); opacity: 0.5; } }
/* ❌ animating width/height/top forces layout every frame → jank */
@keyframes bad { to { width: 300px; top: 50px; } }
Keyframe অ্যানিমেশনগুলি প্রতিটি ফ্রেমে চলে, তাই লেআউট-ট্রিগারিং বৈশিষ্ট্যগুলি অ্যানিমেট করা transform/opacity অ্যানিমেট করার চেয়ে অনেক বেশি ব্যয়বহুল।
@media (prefers-reduced-motion: reduce) {
.spinner { animation: none; } /* honor users sensitive to motion */
}
Keyframe অ্যানিমেশনগুলি লোডার, মনোযোগ সংকেত, প্রবেশাধিকার এবং লুপিং প্রভাবগুলিকে শক্তি দেয় যা ট্রানজিশন প্রকাশ করতে পারে না (বহু-ধাপ, স্বয়ংক্রিয়-চলমান, অসীম)।
সংক্ষিপ্ত রূপটি জানা, মসৃণতার জন্য transform/opacity-এ লেগে থাকা এবং prefers-reduced-motion-কে সম্মান করা আপনাকে সমৃদ্ধ গতি তৈরি করতে দেয় যা কর্মক্ষম এবং অ্যাক্সেসযোগ্য থাকে।