Tidadigi Logo

Tailwind CSS Transition Timing Function

Lớp này chấp nhận nhiều giá trị trong tailwind CSS, nơi tất cả thuộc tính được bao phủ dưới dạng class. Class transition timing function được dùng chỉ định thời gian hiệu ứng chuyển đổi CSS. Trong CSS, chúng ta thực hiện điều đó bằng cách sử dụng CSS transition-timing-function.

Các class Transition timing function:

  • ease-linear: Trong class này, hiệu ứng có cùng tốc độ từ đầu đến cuối.
  • ease-in: Class này tương tự như easing, phần cuối hiệu ứng nhanh hơn.
  • ease-out: Class này tương tự như easing, phần đầu hiệu ứng nhanh hơn.
  • ease-in-out: Class này đặt giá trị về mặc định của nó.

Cú pháp:

<element class="ease-{timing}">...</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 Timing Function Class</b> 
    <div class="bg-green-200 m-8 grid grid-flow-col gap-4 p-5"> 
        <button class="transition duration-700 ease-in 
                       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 for ease-in
        </button>
        <button class="transition duration-700 ease-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 for ease-out
        </button>
        <button class="transition duration-700 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 for ease-in-out
        </button>
        <button class="transition duration-700 ease-linear 
                       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 for ease-linear
        </button>
    </div> 
</body> 
</html>

Kết quả:


Last Updated : 20/07/2025