Tailwind CSS - 過渡時間函式

Tailwind CSS 過渡時間函式是一個實用程式，允許您應用 CSS 過渡的緩動效果，從而實現流暢且受控的動畫。

Tailwind CSS 過渡時間函式類

以下是用於應用平滑過渡時間函式的Tailwind CSS 過渡時間函式類的列表。

類	CSS 屬性
ease-linear	transition-timing-function: linear;
ease-in	transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
ease-out	transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
ease-in-out	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

Tailwind CSS 過渡時間函式類的功能

ease-linear:此類用於保持指定元素從開始到結束的相同過渡速度。
ease-in:此類用於保持指定元素過渡速度在開始時緩慢，在結束時加快。
ease-out:此類用於保持指定元素過渡速度在開始時快速，在結束時減慢。
ease-in-out:此類是 ease-in 和 ease-out 類的組合，主要設定指定元素的預設過渡速度。

Tailwind CSS 過渡時間函式示例

以下示例將說明指定過渡時間函式的不同過渡效果。

示例

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-8 bg-green-100">
    <h2 class="text-2xl font-bold mb-3">
        Tailwind CSS Transition Timing Function  Classes 
    </h2>
    <div class="grid grid-cols-2 gap-2">
        <div>
            <button class="bg-green-500 rounded-3xl p-4 transition-transform 
                            duration-300 ease-linear hover:scale-90 hover:text-white 
                            hover:font-medium">
                Hover :ease-linear
            </button>
        </div>
        <div>
                <button class="bg-green-500 rounded-3xl p-4 transition-transform 
                            duration-300 ease-in hover:scale-90 hover:text-white 
                            hover:font-medium">
                Hover :ease-in
            </button>
        </div>
        <div>
                <button class="bg-green-500 rounded-3xl p-4 transition-transform 
                            duration-300 ease-out hover:scale-90 hover:text-white 
                            hover:font-medium">
                Hover :ease-out
            </button>
        </div>
        <div>
                <button class="bg-green-500 rounded-3xl p-4 transition-transform 
                            duration-300 ease-in-out hover:scale-90 hover:text-white 
                            hover:font-medium">
                Hover :ease-in-out
            </button>
        </div>
    </div>
</body>
</html>

列印頁面