Tidadigi Logo

Tailwind CSS Transition Duration

Class này chấp nhận nhiều giá trị trong tailwind CSS, tất cả thuộc tính đều ở dạng class. Class transition-duration được dùng chỉ định thời gian hoàn thành hiệu ứng chuyển đổi. Trong CSS, ta thực hiện việc đó bằng CSS transition-duration.

Transition Duration classes:

  • duration-75: Class này dùng để đặt thời gian chuyển đổi là 75ms.
  • duration-100: Class này dùng để đặt thời gian chuyển đổi là 100ms.
  • duration-150: Class này dùng để đặt thời gian chuyển đổi là 150ms.
  • duration-200: Class này dùng để đặt thời gian chuyển đổi là 200ms.
  • duration-300: Class này dùng để đặt thời gian chuyển đổi là 300ms.
  • duration-500: Class này dùng để đặt thời gian chuyển đổi là 500ms.
  • duration-700: Class này dùng để đặt thời gian chuyển đổi là 700ms.
  • duration-1000: Class này dùng để đặt thời gian chuyển đổi là 1000ms.

Syntax:

<element class="duration-{amount}">...</element>

Example:

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 Duration Class</b> 
    <div class="bg-green-200 m-8 grid grid-flow-col gap-4 p-5"> 
        <button class="transition duration-75 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 duration-100 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 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 duration-1000 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>
    </div> 
</body> 

</html>

Output:


Last Updated : 20/07/2025