@keyframes hoạt động thế nào?

@keyframes mô tả các mốc trạng thái, animation gắn chúng vào element.

@keyframes fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}

.toast {
  animation: fade-up 0.28s ease-out both;
  /*         tên     thời-lượng easing fill-mode */
}

Các thuộc tính con của animation: name, duration, timing-function, delay, iteration-count, direction, fill-mode, play-state.

fill-mode là thứ hay bị quên:
- forwards — giữ trạng thái cuối sau khi chạy xong.
- backwards — áp trạng thái đầu ngay trong lúc delay.
- both — cả hai (thường là thứ bạn muốn).

Lưu ý 1: không có fill-mode, element bật ngược về style gốc ngay khi animation kết thúc — hiệu ứng nhấp nháy khó hiểu.

Lưu ý 2: animate width, height, top, left gây layout lại mỗi khung hình. Ưu tiên transform và opacity.

Bắt buộc: phải tắt/giảm animation cho người dùng đã bật giảm chuyển động:

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; }
}