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

Question

IT Interview Practice · Accepted Answer

Trong khi transition animate *giữa hai trạng thái*, **`@keyframes` animation** định nghĩa một chuỗi nhiều bước có thể chạy tự động, lặp, và đi qua nhiều trạng thái trung gian.

## Định nghĩa và áp dụng một 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;
}
```

## Keyframe nhiều bước với phần trăm

```css
@keyframes bounce {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-30px); } /* đỉnh của cú nảy */
  100% { transform: translateY(0); }
}
```

Phần trăm cho phép bạn dàn dựng nhiều giai đoạn trong một animation — không thể làm với một transition đơn giản.

## Cú pháp rút gọn đầy đủ của animation

```css
.spinner {
  animation: spin 1s linear infinite;
  /*         │    │    │      └── iteration-count (infinite = lặp mãi mãi) */
  /*         │    │    └───────── timing function */
  /*         │    └────────────── duration */
  /*         └─────────────────── tên @keyframes */
}
@keyframes spin { to { transform: rotate(360deg); } } /* loading spinner kinh điển */
```

Các thuộc tính khác: `animation-delay`, `animation-direction: alternate` (qua lại), `animation-fill-mode: forwards` (giữ trạng thái cuối), `animation-play-state: paused`.

## Hiệu năng — chỉ animate transform/opacity

```css
/* ✅ GPU-composited, 60fps */
@keyframes good { to { transform: scale(1.1); opacity: 0.5; } }
/* ❌ animate width/height/top ép layout mỗi frame → giật */
@keyframes bad  { to { width: 300px; top: 50px; } }
```

Keyframe animation chạy ở mỗi frame, nên animate các thuộc tính kích hoạt layout tốn kém hơn nhiều so với animate `transform`/`opacity`.

## Accessibility

```css
@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none; } /* tôn trọng người dùng nhạy cảm với chuyển động */
}
```

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

Keyframe animation cung cấp sức mạnh cho loader, tín hiệu thu hút chú ý, hiệu ứng xuất hiện, và hiệu ứng lặp mà transition không thể diễn đạt (nhiều bước, tự chạy, vô hạn).

Biết cú pháp rút gọn, bám vào `transform`/`opacity` cho sự mượt mà, và tôn trọng `prefers-reduced-motion` cho phép bạn xây dựng chuyển động phong phú mà vẫn giữ hiệu năng và accessible.

Định nghĩa và áp dụng một animation

Keyframe nhiều bước với phần trăm

Cú pháp rút gọn đầy đủ của animation

Hiệu năng — chỉ animate transform/opacity

Accessibility

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

Câu hỏi liên quan