Πώς λειτουργούν οι CSS keyframe κινούμενες εικόνες;

Question

Accepted Answer

Ενώ οι μεταπτώσεις κινούν *μεταξύ δύο καταστάσεων*, **οι κινούμενες εικόνες `@keyframes`** ορίζουν μια ακολουθία πολλαπλών σταδίων που μπορεί να εκτελεστεί αυτόματα, να γνέψει σε βρόχο και να κινηθεί μέσα από πολλές ενδιάμεσες καταστάσεις.

## Ορισμός και εφαρμογή κινούμενης εικόνας

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

Τα ποσοστά σας επιτρέπουν να χορογραφήσετε πολλά στάδια σε μια κινούμενη εικόνα — αδύνατο με μια απλή μετάπτωση.

## Η πλήρης σύντμηση κινούμενης εικόνας

```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` (πινγκ-πονγκ), `animation-fill-mode: forwards` (διατηρήστε την τελική κατάσταση), `animation-play-state: paused`.

## Απόδοση — κινούμενα μόνο transform/opacity

```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 εκτελούνται σε κάθε καρέ, επομένως η κίνηση ιδιοτήτων που ενεργοποιούν διάταξη είναι πολύ πιο δαπανηρή από την κίνηση `transform`/`opacity`.

## Προσβασιμότητα

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

## Γιατί αυτό έχει σημασία

Οι κινούμενες εικόνες keyframe ισχύουν φορτωτές, σήματα προσοχής, εισόδους και εφέ βρόχου που οι μεταπτώσεις δεν μπορούν να εκφράσουν (πολλαπλά στάδια, αυτόματη εκτέλεση, άπειρο).

Η γνώση της σύντμησης, η τήρηση `transform`/`opacity` για ομαλότητα και το σεβασμό `prefers-reduced-motion` σας επιτρέπουν να δημιουργήσετε πλούσια κίνηση που παραμένει αποδοτική και προσβάσιμη.