Tidadigi Logo

Tailwind CSS Transition Property

Lớp này chấp nhận nhiều giá trị trong tailwind CSS, tất cả thuộc tính được bao phủ dưới dạng lớp. Lớp transition-property được dùng để chỉ định tên thuộc tính CSS cho hiệu ứng chuyển đổi. Trong CSS, ta thực hiện việc đó bằng CSS transition-property.

Các lớp Transition Property:

  • transition-none: Giá trị này chỉ định rằng không lớp nào nhận hiệu ứng chuyển đổi.
  • transition-all: Tất cả các lớp sẽ nhận hiệu ứng chuyển đổi. Đây cũng là giá trị mặc định cho lớp này.
  • transition: Ta có thể chỉ định tên thuộc tính CSS cho hiệu ứng chuyển đổi. Ta có thể chỉ định nhiều thuộc tính bằng dấu phẩy.
  • transition-colors: Giá trị này chỉ định lớp color sẽ nhận hiệu ứng chuyển đổi.
  • transition-opacity: Giá trị này chỉ định lớp opacity sẽ nhận hiệu ứng chuyển đổi.
  • transition-shadow: Giá trị này chỉ định lớp shadow sẽ nhận hiệu ứng chuyển đổi.
  • transition-transform: Giá trị này chỉ định sự biến đổi thành một hình dạng xác định.

Cú pháp:

<element class="transition-{properties}">...</element>

Ví dụ:

HTML 
<!DOCTYPE html> 
<html>
<head> 
    <link href= 
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
        rel="stylesheet"> 
</head> 

<body class="text-center mx-4 space-y-2"> 
    <h1 class="text-green-600 text-5xl font-bold"> 
        GeeksforGeeks 
    </h1> 
    <b>Tailwind CSS Transition Property Class</b> 
    <div class="bg-green-200 m-8 grid grid-flow-col gap-4 p-5"> 
        <button class="transition duration-500 ease-in-out 
                       bg-green-300 hover:bg-green-600 transform 
                       hover:-translate-y-1 hover:scale-110 
                       rounded-lg p-4 border border-green-900">
            Hover me
        </button>
        <button class="transition-opacity duration-500 ease-in-out 
                       bg-green-300 hover:opacity-75 transform 
                       hover:-translate-y-1 hover:scale-110 
                       rounded-lg p-4 border border-green-900">
            Hover me
        </button>
        <button class="transition-none duration-500 ease-in-out 
                       bg-green-300 hover:bg-green-600 transform 
                       hover:-translate-y-1 hover:scale-110 
                       rounded-lg p-4 border border-green-900">
            Hover me
        </button>
        <button class="transition-colors duration-500 ease-in-out 
                       bg-green-300 hover:bg-yellow-600 transform 
                       hover:scale-110 rounded-lg p-4 border 
                       border-green-900 hover:border-black">
            Hover me
        </button>
    </div> 
</body> 

</html>

Đầu ra:


Last Updated : 20/07/2025