CSS transition hoạt động như thế nào?

Question

Accepted Answer

Một **transition** chuyển động mượt mà một thuộc tính từ giá trị cũ sang giá trị mới theo thời gian, thay vì thay đổi tức thì. Bạn khai báo *cái gì* để animate và *bao lâu*, rồi kích hoạt nó bằng cách thay đổi thuộc tính (thường qua `:hover` hoặc một class).

```css
.button {
  background: blue;
  transition: background 0.3s ease;  /* animate background trong 300ms */
}
.button:hover {
  background: darkblue;  /* khi hover, nó mờ dần mượt mà thay vì nhảy đột ngột */
}
```

## Bốn phần của cú pháp rút gọn

```css
transition: background 0.3s ease 0s;
/*          │          │    │    └── delay trước khi bắt đầu */
/*          │          │    └─────── timing function (đường cong easing) */
/*          │          └──────────── duration (thời lượng) */
/*          └─────────────────────── thuộc tính để animate (hoặc `all`) */
```

## Animate nhiều thuộc tính

```css
.card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
  transform: translateY(-4px);          /* nâng lên */
  box-shadow: 0 8px 20px rgba(0,0,0,0.2); /* + shadow sâu hơn */
}
```

Liệt kê từng thuộc tính (ngăn cách bằng dấu phẩy) thay vì dùng `all`, vốn có thể vô tình animate những thứ bạn không định và hại hiệu năng.

## Timing function

```css
transition-timing-function: ease;        /* chậm-nhanh-chậm (mặc định) */
/* linear | ease-in | ease-out | ease-in-out */
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); /* đường cong tùy chỉnh */
```

## Hiệu năng: animate transform/opacity

```css
/* ✅ rẻ — GPU-composited, không tính lại layout */
transition: transform 0.3s, opacity 0.3s;
/* ❌ đắt — animate width/top/left kích hoạt layout mỗi frame */
transition: width 0.3s, left 0.3s;
```

Ưu tiên animate `transform` và `opacity`; chúng được xử lý bởi compositor mà không phải chạy lại layout, nên giữ mượt (60fps).

## Accessibility

```css
@media (prefers-reduced-motion: reduce) {
  * { transition: none; } /* tôn trọng người dùng bị say chuyển động */
}
```

## Tại sao điều này quan trọng

Transition thêm sự chỉn chu khiến UI cảm thấy phản hồi và sống động (hiệu ứng hover, chuyển trạng thái mượt) chỉ với một dòng.

Biết animate `transform`/`opacity` cho hiệu năng — và tôn trọng `prefers-reduced-motion` — là điều phân biệt chuyển động mượt, accessible với animation giật cục.