Bài 7. Hiệu ứng: transition, transform, animation, gradient

Bài này áp dụng các hiệu ứng CSS (loạt CSS bài 17–19) bằng lớp Tailwind: chuyển tiếp mượt, biến đổi, chuyển động có sẵn (spin, ping, pulse, bounce), gradient, bộ lọc, kính mờ, và tôn trọng người dùng giảm chuyển động.

45 phútCơ bản
Bạn sẽ học được
  • Dùng transition, duration-*, ease-*
  • Dùng scale, rotate, translate, skew
  • Dùng animate-* và tự định nghĩa animation
  • Gradient, blur, backdrop-blur, motion-safe/motion-reduce

Một số khái niệm

Mục đíchLớp
Chuyển tiếptransition, transition-colors, duration-300, ease-out, delay-150
Biến đổiscale-105, rotate-6, -translate-y-1, skew-x-3
Chuyển động sẵnanimate-spin, animate-ping, animate-pulse, animate-bounce
Gradientbg-linear-to-r from-green-600 via-teal-500 to-sky-500
Bộ lọcblur-sm, grayscale, brightness-110, backdrop-blur-md
Giảm chuyển độngmotion-safe:animate-bounce, motion-reduce:transition-none

Chuyển tiếp và biến đổi

<div class="flex flex-wrap gap-4">
  <button class="rounded-lg bg-green-600 px-4 py-2 text-white transition duration-200 hover:-translate-y-1 hover:shadow-lg">Nổi lên</button>
  <button class="rounded-lg bg-sky-600 px-4 py-2 text-white transition hover:scale-110 active:scale-95">Phóng to</button>
  <button class="rounded-lg bg-violet-600 px-4 py-2 text-white transition duration-500 hover:rotate-6">Xoay</button>
  <div class="group overflow-hidden rounded-xl"><img src="https://picsum.photos/seed/ttw/240/140" class="h-24 w-40 object-cover transition duration-500 group-hover:scale-110" alt=""></div>
</div>
Kết quả hiển thị

Chuyển động có sẵn

<div class="flex items-center gap-8">
  <div class="size-8 animate-spin rounded-full border-4 border-green-200 border-t-green-600"></div>
  <span class="relative flex size-4"><span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-rose-400 opacity-75"></span><span class="relative inline-flex size-4 rounded-full bg-rose-500"></span></span>
  <div class="motion-safe:animate-bounce text-2xl">⬇</div>
  <div class="w-48 space-y-2"><div class="h-3 animate-pulse rounded bg-slate-200"></div><div class="h-3 w-2/3 animate-pulse rounded bg-slate-200"></div></div>
</div>
Kết quả hiển thị

Gradient, chữ gradient, kính mờ

<div class="rounded-2xl bg-linear-to-r from-green-600 via-teal-500 to-sky-500 p-5 text-white">Gradient 3 màu</div>
<p class="mt-3 bg-linear-to-r from-fuchsia-600 to-orange-500 bg-clip-text text-3xl font-black text-transparent">Chữ gradient</p>
<div class="relative mt-3 h-28 overflow-hidden rounded-2xl bg-[url(https://picsum.photos/seed/glass/600/240)] bg-cover"><div class="absolute inset-4 grid place-items-center rounded-xl border border-white/40 bg-white/20 text-white backdrop-blur-md">Kính mờ backdrop-blur-md</div></div>
Kết quả hiển thị

Tự định nghĩa animation (v4)

/* style.css */
@import "tailwindcss";
@theme {
  --animate-xuat-hien: xuat-hien .6s ease-out both;
  @keyframes xuat-hien {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
  }
}
/* Dùng:  <div class="animate-xuat-hien">...</div> */
Mẹo hay

Ưu tiên transition trên transform và opacity; thêm motion-reduce:transition-none cho hiệu ứng lớn.

Lưu ý

animate-ping, animate-bounce chạy mãi rất gây chú ý; chỉ dùng cho điểm nhấn thật sự (thông báo mới, nút cuộn xuống).

Thực hành
  1. Thẻ khóa học nổi lên và đổ bóng khi rê chuột.
  2. Skeleton loading 3 dòng bằng animate-pulse.
  3. Tiêu đề trang chữ gradient.
  4. Tạo animation xuất hiện riêng bằng @theme.
Tóm tắt bài học
  • transition + duration + ease cho mượt.
  • scale, rotate, translate, skew.
  • animate-spin/ping/pulse/bounce; tự định nghĩa trong @theme.
  • bg-linear-to-*, bg-clip-text, backdrop-blur, motion-safe/reduce.