जेव्हा ट्रांজिशन्स दोन अवस्थांमध्ये अॅनिमेट करतात, तेव्हा @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 अॅनिमेशन्स लोडर्स, लक्ष्य संकेत, प्रवेश आणि लूपिंग प्रभाव शक्तिशाली करतात जे ट्रांजिशन्स व्यक्त करू शकत नाहीत (बहु-पावली, स्वयंचालित-चालू, अनंत)।
shorthand जाणून, transform/opacity साठी गुळगुळीतपणा टिकवून राखणे आणि prefers-reduced-motion ला सन्मान देणे आपल्याला समृद्ध गती तयार करू देते जी कार्यक्षम आणि सुलभ राहते।