CSS keyframe animations कसरी काम गर्छन्?

Question

Accepted Answer

जबकि transitions *दुई अवस्थाहरू बीच* animate गर्छन्, **`@keyframes` animations** एक बहु-चरणीय अनुक्रम परिभाषित गर्छन् जो स्वचालित रूपमा चलन सक्छ, लूप गर्न सक्छ, र धेरै मध्यवर्ती अवस्थाहरूमा सार्न सक्छ।

## Animation परिभाषित र लागू गर्दै

```css
@keyframes slide-in {
  from { transform: translateX(-100%); opacity: 0; } /* 0% */
  to   { transform: translateX(0);     opacity: 1; } /* 100% */
}

.panel {
  animation: slide-in 0.5s ease-out;
}
```

## प्रतिशतहरूसहित बहु-चरणीय keyframes

```css
@keyframes bounce {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-30px); } /* peak of the bounce */
  100% { transform: translateY(0); }
}
```

प्रतिशतहरूले तपाईंलाई एक animation मा धेरै चरणहरू सङ्गीत गर्न दिन्छ — साधारण transition सँग असम्भव।

## पूर्ण animation shorthand

```css
.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`।

## प्रदर्शन — केवल transform/opacity animate गर्नुहोस्

```css
/* ✅ 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 animations प्रत्येक frame मा चलन्छन्, त्यसैले layout-triggering गुणहरू animate गर्नु `transform`/`opacity` animate गर्नु भन्दा धेरै महँगो छ।

## पहुँचयोग्यता

```css
@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none; } /* honor users sensitive to motion */
}
```

## किन यो महत्त्वपूर्ण छ

Keyframe animations loaders, ध्यान सङ्केतहरू, प्रवेशहरू, र looping प्रभावहरू शक्तिशाली गर्छन् जुन transitions व्यक्त गर्न सक्दैन (बहु-चरणीय, स्वचालित-चलिरहेको, अनन्त)।

Shorthand जान्दै, `transform`/`opacity` को लागि चिपकिरहेको, र `prefers-reduced-motion` को सम्मान गर्दै तपाईंलाई समृद्ध गति निर्माण गर्न अनुमति दिन्छ जुन कार्यकारी र पहुँचयोग्य रहन्छ।