Bài 21: Transition và animation trong Tailwind CSS

Bạn có để ý những hiệu ứng mượt mà khi rê chuột vào nút bấm hay khi ảnh phóng to dần không?
Đó chính là nhờ transition và animation — yếu tố làm cho giao diện trở nên sống động và chuyên nghiệp.

Trong CSS truyền thống, bạn phải khai báo transition, animation, @keyframes… nhưng với Tailwind CSS, mọi thứ đã được đóng gói thành các class sẵn sàng sử dụng.

Trong bài học hôm nay, chúng ta sẽ học:

• Làm mượt hiệu ứng thay đổi trạng thái bằng transition
• Các class duration, ease, delay
• Hiệu ứng animate có sẵn như animate-bounce, animate-spin
• Cách kết hợp chúng trong các tình huống thực tế

---

Transition – hiệu ứng chuyển đổi mượt

Tailwind hỗ trợ bạn làm mượt khi phần tử thay đổi trạng thái (ví dụ: màu nền, scale, opacity…).

Cấu trúc class:

📋 Copytransition-[what] duration-[ms] ease-[type] delay-[ms]

Ví dụ 1: Hover đổi màu mượt mà

📋 Copy<button class="bg-blue-600 text-white px-4 py-2 rounded 
               hover:bg-blue-800 transition-colors duration-300">
  Nhấn vào tôi
</button>

Giải thích:

• hover:bg-blue-800: thay đổi màu khi hover
• transition-colors: làm mượt hiệu ứng màu
• duration-300: kéo dài 300ms

Ví dụ 2: Zoom nhẹ khi hover

📋 Copy<div class="w-32 h-32 bg-green-400 transform 
            hover:scale-105 transition-transform duration-200">
</div>

Giải thích:

• transform: bật khả năng transform
• scale-105: phóng to 5%
• transition-transform: mượt hóa transform

---

Các class hữu ích cho transition

Class	Tác dụng
transition	Bật tất cả hiệu ứng có thể
transition-colors	Chỉ transition màu sắc
transition-opacity	Làm mượt khi thay đổi opacity
transition-transform	Dành cho scale, rotate, translate
duration-150 → 1000	Thời gian (ms): 150ms đến 1000ms
ease-linear, ease-in, ease-out, ease-in-out	Kiểu tăng tốc
delay-100, delay-200, …	Trì hoãn hiệu ứng

---

Animation – hiệu ứng động lặp

Tailwind cung cấp một số animation mặc định giúp bạn tạo hiệu ứng “chuyển động thật sự”.

Class	Tác dụng
animate-spin	Quay vòng (loading)
animate-ping	Nhấp nháy lan rộng
animate-pulse	Nhịp tim, mờ sáng mờ tối
animate-bounce	Nảy lên xuống
animate-none	Không animation

Ví dụ 3: Nút loading quay vòng

📋 Copy<button class="px-4 py-2 bg-gray-300 text-gray-800 rounded flex items-center">
  <svg class="w-5 h-5 animate-spin mr-2" viewBox="0 0 24 24">
    <circle cx="12" cy="12" r="10" stroke="gray" stroke-width="4" fill="none" />
  </svg>
  Đang xử lý...
</button>

---

Kết hợp thực tế: Thẻ thông báo tự động mờ đi

📋 Copy<div class="bg-green-500 text-white px-4 py-2 rounded 
            opacity-100 hover:opacity-70 transition-opacity duration-300">
  Đăng ký thành công!
</div>

Hoặc:

📋 Copy<div class="animate-bounce bg-yellow-400 text-black text-center p-4 rounded">
  Ưu đãi hôm nay!
</div>

---

So sánh với CSS thuần

Ý tưởng	CSS thuần	Tailwind CSS
transition: all 300ms ease-in	transition duration-300 ease-in
animation: bounce 1s infinite	animate-bounce
:hover { transform: scale(1.1) }	hover:scale-110 + transition-transform

---

Tổng kết kiến thức

Tính năng	Class Tailwind tương ứng
Mượt hiệu ứng	transition-*, duration-*, ease-*
Animation lặp	animate-bounce, animate-spin, v.v.
Delay hiệu ứng	delay-200, delay-500
Transform	scale-*, translate-*, rotate-*

---

Tóm tắt bài học

• Tailwind giúp bạn thêm hiệu ứng chuyển động dễ dàng bằng cách ghép class.
• transition làm mượt các thay đổi như màu, kích thước, opacity.
• animation tạo các hiệu ứng động như xoay, nhấp nháy, nảy.
• Bạn không cần viết CSS tay — chỉ cần lắp đúng class.

---

Bài tiếp theo

Hiệu ứng sẽ sinh động hơn nếu ta biết tương tác nhiều phần tử cùng lúc, như:

• Khi hover vào cha, con cũng thay đổi (group-hover)
• Khi input được focus, label đổi màu (focus-within)
• Khi checkbox được chọn, hiện thêm khối mới…

Tất cả những điều đó sẽ có trong bài 22: Trạng thái tương tác nâng cao – group-hover, focus-within và beyond.

---

Hẹn bạn trong bài học tiếp theo — nơi chúng ta sẽ làm cho giao diện biết phản ứng theo hành vi người dùng một cách tinh tế!