जबकि संक्रमण दो अवस्थाओं के बीच एनिमेट करते हैं, @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 (ping-pong), 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 का सम्मान करना आपको समृद्ध गति बनाने देता है जो प्रदर्शनशील और सुलभ रहती है।