Kif jaħdmu t-tranżizzjonijiet CSS?

Question

IT Interview Practice · Accepted Answer

A **transition** jinħoloq animazzjoni bla xkiel ta' proprjetà mill-valur antik tagħha sa wieħed ġdid fuq perjodu ta' ħin, minflok ma tibdilha istantanjament. Int tiddikjara *x'inhu* li tħanċel u *kemm timp*, imbagħad tattivaha billi tibdel il-proprjetà (ħafna drabi permezz ta' `:hover` jew class).

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

## L-erba' partijiet tal-abbrevjazzjoni

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

## Animazzjoni ta' proprjetà multipli

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

Ellenka kull proprjetà (separata b'virgola) minflok ma tuża `all`, li jista' aċċidentalment jinħanċel affarijiet li ma intendtx u jgħaqqad il-prestazzjoni.

## Funzjonijiet tal-ħin

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

## Prestazzjoni: animazzjoni 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;
```

Ippreferi tinħanċel `transform` u `opacity`; huma ġestiti mill-compositor mingħajr ma jerġa' jinħalla l-layout, allokwa jibqgħu bla xkiel (60fps).

## Aċċessibilità

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

## Għaliex hu importanti

It-tranżizzjonijiet iżidu l-poliment li jagħmel il-UI jħoss responsiv u ħaj (hover effects, bidliet ta' stat bla xkiel) b'linja waħda biss.

Il-għarfien li tinħanċel `transform`/`opacity` għall-prestazzjoni — u li tqajjem `prefers-reduced-motion` — huwa dak li jissepara l-moċjoni bla xkiel u aċċessibli mill-animazzjoni janky.

L-erba' partijiet tal-abbrevjazzjoni

Animazzjoni ta' proprjetà multipli

Funzjonijiet tal-ħin

Prestazzjoni: animazzjoni transform/opacity

Aċċessibilità

Għaliex hu importanti

Mistoqsijiet relatati