Bài 21: Animation – Chuyển động nâng cao với CSS

CSS transition chỉ áp dụng khi có thay đổi trạng thái (như hover, active), nhưng nếu bạn muốn tạo chuyển động tự động, nhiều bước, hoặc lặp lại liên tục (như loading, rung, nhấp nháy…), thì cần dùng đến @keyframes và animation.

Trong bài này, bạn sẽ học cách:

• Tạo animation bằng @keyframes
• Gán animation cho phần tử
• Điều chỉnh thời gian, số lần lặp, kiểu chuyển động
• Làm hiệu ứng rung, nhấp nháy, loading đơn giản

---

1. Cấu trúc animation

📋 Copy@keyframes ten-animation {
  0%   { ... }
  50%  { ... }
  100% { ... }
}

Sau đó gán vào phần tử:

📋 Copy.element {
  animation-name: ten-animation;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

---

2. Ví dụ 1: chữ nhấp nháy

📋 Copy@keyframes blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

.blink {
  animation: blink 1s infinite;
}

HTML:

📋 Copy<p class="blink">Đang tải...</p>

---

3. Ví dụ 2: nút rung nhẹ khi hover

📋 Copy@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-5px); }
  75%      { transform: translateX(5px); }
}

button:hover {
  animation: shake 0.4s;
}

Giúp thu hút sự chú ý khi người dùng rê chuột vào.

---

4. Ví dụ 3: hộp trượt vào từ trái

📋 Copy@keyframes slideIn {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.box {
  animation: slideIn 1s ease-out forwards;
}

• forwards: giữ trạng thái cuối sau khi kết thúc
• ease-out: chuyển động mượt ở cuối

---

5. Các thuộc tính animation quan trọng

Thuộc tính	Ý nghĩa
animation-name	Tên animation (định nghĩa bằng @keyframes)
animation-duration	Thời gian chuyển động (ví dụ: 2s)
animation-timing-function	Kiểu chuyển động: ease, linear, ease-in
animation-delay	Đợi bao lâu mới bắt đầu
animation-iteration-count	Số lần lặp (1, infinite)
animation-direction	normal, reverse, alternate, alternate-reverse
animation-fill-mode	none, forwards, backwards, both

---

6. Viết gọn với shorthand

Thay vì viết từng dòng:

📋 Copyanimation-name: slideIn;
animation-duration: 1s;
animation-timing-function: ease-out;
animation-fill-mode: forwards;

→ Có thể viết gọn:

📋 Copyanimation: slideIn 1s ease-out forwards;

---

7. Thực hành: Loading xoay vòng

📋 Copy@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.loader {
  width: 40px;
  height: 40px;
  border: 4px solid #ccc;
  border-top-color: #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

HTML:

📋 Copy<div class="loader"></div>

---

8. Ghi nhớ

Khi bạn muốn…	Sử dụng gì?
Tạo hiệu ứng hover đơn giản	transition
Tạo hiệu ứng lặp lại hoặc tự động	@keyframes + animation
Điều chỉnh tốc độ, số lần, hướng	animation-*
Kết hợp nhiều trạng thái chuyển tiếp	keyframes