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` ਦਾ ਸਨਮਾਨ ਕਰਦੇ ਹੋਏ ਤੁਸੀਂ ਅਮੀਰ ਗਤੀ ਬਣਾ ਸਕਦੇ ਹੋ ਜੋ ਪ੍ਰਦਰਸ਼ਨਸ਼ੀਲ ਅਤੇ ਪਹੁੰਚਯੋਗ ਰਹਦੀ ਹੈ।