Animations za keyframe za CSS hufanya kazi vipi?

Question

Accepted Answer

Wakati transitions huanimisha *kati ya hali mbili*, **animations za `@keyframes`** hufafanua mfululizo wa hatua nyingi unaoweza kuendeshwa kiotomatiki, kujirudia, na kupita katika hali nyingi za kati.

## Kufafanua na kutumia 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 za hatua nyingi kwa asilimia

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

Asilimia hukuruhusu kupanga hatua kadhaa katika animation moja — jambo lisilowezekana kwa transition rahisi.

## Njia fupi kamili ya animation

```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 */
```

Mali nyingine: `animation-delay`, `animation-direction: alternate` (ping-pong), `animation-fill-mode: forwards` (hifadhi hali ya mwisho), `animation-play-state: paused`.

## Utendaji — animisha transform/opacity pekee

```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; } }
```

Animations za keyframe huendeshwa kwa kila frame, hivyo kuanimisha mali zinazochochea layout ni ghali zaidi kuliko kuanimisha `transform`/`opacity`.

## Ufikiaji

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

## Kwa nini ni muhimu

Animations za keyframe huendesha loaders, viashiria vya umakini, maingilio, na athari za kujirudia ambazo transitions haziwezi kueleza (hatua nyingi, kujiendesha, bila kikomo).

Kujua njia fupi, kushikamana na `transform`/`opacity` kwa ulaini, na kuheshimu `prefers-reduced-motion` kunakuwezesha kujenga mwendo tajiri unaobaki na utendaji mzuri na unaofikika.