HTML, CSS

🎞️ Tailwind CSS: Animation với transition, transform, và animate

Posted on by Đỗ Thành
26
Th6
View: 27

Dưới đây là phần tiếp theo trong chuỗi thực hành Tailwind CSS, tập trung vào việc tạo hiệu ứng động (animation) giúp giao diện web trực quan, mượt mà và thu hút người dùng. Tailwind CSS cung cấp đầy đủ công cụ để bạn xử lý animation mà không cần viết thêm CSS.

🎯 Mục tiêu

  • Làm chủ các class giúp tạo chuyển động mượt mà
  • Sử dụng transition để hiệu ứng xảy ra tự nhiên
  • Kết hợp transform để xoay, phóng to, dịch chuyển phần tử
  • Áp dụng các class animate- để tạo hiệu ứng có sẵn như spin, bounce, pulse
  • Tự định nghĩa animation trong tailwind.config.js khi cần

🔹 1. Hiệu ứng chuyển động: transition

Tailwind cung cấp class transition và các biến thể để điều khiển tốc độ và thuộc tính chuyển động.

✨ Ví dụ: Hover đổi màu + scale mượt mà

<button class="bg-blue-600 text-white px-6 py-2 rounded transition duration-300 ease-in-out transform hover:bg-blue-700 hover:scale-105">
  Hover tôi đi
</button>
ClassChức năng
transitionKích hoạt hiệu ứng chuyển động
duration-300Thời gian: 300ms
ease-in-outĐường cong chuyển động
transformCho phép dùng scale, rotate
hover:scale-105Phóng to khi hover

🔹 2. Dịch chuyển, phóng to, xoay với transform

<div class="w-32 h-32 bg-green-500 transform hover:translate-x-4 hover:rotate-6 hover:scale-110 transition duration-300"></div>

✅ Một số class transform phổ biến:

  • scale-105, scale-50, hover:scale-110
  • rotate-45, hover:rotate-6
  • translate-x-4, translate-y-6, hover:-translate-y-2
  • skew-x-6, skew-y-12

🔹 3. Animation có sẵn với animate-*

Tailwind tích hợp sẵn các class animation cơ bản, tự động lặp vô hạn:

ClassMô tả hiệu ứng
animate-spinXoay vòng liên tục
animate-bounceNảy lên và xuống
animate-pingPhát ra vòng tròn xung quanh
animate-pulseNhấp nháy mờ dần (dùng cho loading)
animate-wiggle(tuỳ biến) Rung lắc khi hover

🌀 Ví dụ: Nút loading với animate-pulse

<div class="bg-blue-600 w-32 h-12 rounded animate-pulse text-white flex items-center justify-center">
  Đang tải...
</div>

🔄 Icon quay (spinner)

<svg class="animate-spin h-6 w-6 text-blue-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
  <path class="opacity-75" fill="currentColor"
    d="M4 12a8 8 0 018-8v4l3-3-3-3v4a8 8 0 00-8 8h4z" />
</svg>

🔹 4. Tuỳ biến animation với tailwind.config.js

Nếu bạn muốn thêm animation riêng:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      animation: {
        wiggle: 'wiggle 1s ease-in-out infinite',
      },
      keyframes: {
        wiggle: {
          '0%, 100%': { transform: 'rotate(-3deg)' },
          '50%': { transform: 'rotate(3deg)' },
        },
      }
    },
  },
}


<button class="animate-wiggle bg-yellow-400 px-4 py-2 rounded">
  Tôi đang rung!
</button>

🎨 Kết hợp thực tế: Thẻ sản phẩm hover nổi bật

<div class="max-w-xs bg-white rounded-lg shadow hover:shadow-lg transform hover:scale-105 transition duration-300">
  <img src="https://source.unsplash.com/400x250/?ui" alt="" class="rounded-t-lg" />
  <div class="p-4">
    <h3 class="text-lg font-semibold">UI Design</h3>
    <p class="text-sm text-gray-500">Sáng tạo với Tailwind CSS.</p>
  </div>
</div>

✅ Tóm tắt: Khi nào dùng gì?

Mục đíchClass sử dụng
Hiệu ứng hover mượttransition, hover: + transform
Nút/ảnh phóng to nhẹhover:scale-105, duration-300
Icon loadinganimate-spin, animate-pulse
Alert xuất hiện đẹp mắtKết hợp transition, translate, opacity
Hiệu ứng tuỳ chỉnh nâng caoĐịnh nghĩa @keyframes + animate-*

Đỗ Thành