Πώς λειτουργούν οι CSS transitions;

Question

Accepted Answer

Μια **transition** κινεί ομαλά μια ιδιότητα από την παλιά τιμή στη νέα με την πάροδο του χρόνου, αντί να την αλλάζει αμέσως. Δηλώνετε *τι* θέλετε να κινήσετε και *για πόσο χρόνο*, και στη συνέχεια το ενεργοποιείτε αλλάζοντας την ιδιότητα (συχνά μέσω `:hover` ή μιας κλάσης).

```css
.button {
  background: blue;
  transition: background 0.3s ease;  /* animate background over 300ms */
}
.button:hover {
  background: darkblue;  /* on hover, it fades smoothly instead of snapping */
}
```

## Τα τέσσερα μέρη της συντομογραφίας

```css
transition: background 0.3s ease 0s;
/*          │          │    │    └── delay before starting */
/*          │          │    └─────── timing function (the easing curve) */
/*          │          └──────────── duration */
/*          └─────────────────────── property to animate (or `all`) */
```

## Κίνηση πολλών ιδιοτήτων

```css
.card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
  transform: translateY(-4px);          /* lifts up */
  box-shadow: 0 8px 20px rgba(0,0,0,0.2); /* + deeper shadow */
}
```

Σημειώστε κάθε ιδιότητα (χωρισμένες με κόμματα) αντί να χρησιμοποιείτε `all`, το οποίο μπορεί κατά λάθος να κινήσει πράγματα που δεν προορίζατε και να βλάψει την απόδοση.

## Συναρτήσεις χρονισμού

```css
transition-timing-function: ease;        /* slow-fast-slow (default) */
/* linear | ease-in | ease-out | ease-in-out */
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); /* custom curve */
```

## Απόδοση: κινήστε transform/opacity

```css
/* ✅ cheap — GPU-composited, no layout recalculation */
transition: transform 0.3s, opacity 0.3s;
/* ❌ expensive — animating width/top/left triggers layout on every frame */
transition: width 0.3s, left 0.3s;
```

Προτιμήστε την κίνηση `transform` και `opacity`; αυτές χειρίζονται από το compositor χωρίς να ξανατρέχει το layout, οπότε παραμένουν ομαλές (60fps).

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

```css
@media (prefers-reduced-motion: reduce) {
  * { transition: none; } /* respect users who get motion sickness */
}
```

## Γιατί είναι σημαντικό

Οι transitions προσθέτουν το λάμψιμο που κάνει το UI να αισθάνεται ανταποκριτικό και ζωντανό (εφέ hover, ομαλές αλλαγές κατάστασης) με μόνο μία γραμμή.

Το να γνωρίζετε πότε να κινήσετε `transform`/`opacity` για απόδοση — και να σεβαστείτε `prefers-reduced-motion` — είναι αυτό που διαχωρίζει τη ομαλή, προσβάσιμη κίνηση από την κολλώδη animation.