Tailwind CSS - 過渡時長

Tailwind CSS 過渡時長是一個實用程式類，允許我們為 CSS 過渡應用時長。

Tailwind CSS 過渡時長類

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

類	CSS 屬性
duration-0	transition-duration: 0s;
duration-75	transition-duration: 75ms;
duration-100	transition-duration: 100ms;
duration-150	transition-duration: 150ms;
duration-200	transition-duration: 200ms;
duration-300	transition-duration: 300ms;
duration-500	transition-duration: 500ms;
duration-700	transition-duration: 700ms;
duration-1000	transition-duration: 1000ms;

Tailwind CSS 過渡時長類的功能

duration-*： 類用於為過渡屬性新增時長。* 這裡指定了可以根據需要設定的不同過渡時長值。

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 Duration Classes 
    </h2>
    <div class="grid grid-cols-2 gap-2">
        <div>
            <button class="bg-green-500 rounded-3xl p-4 transition-transform 
                            duration-100 hover:scale-90 hover:text-white 
                            hover:font-medium">
                Hover :Duration-100
            </button>
        </div>
        <div>
            <button class="bg-green-500 rounded-3xl p-4 transition-colors 
                            duration-300 hover:text-white hover:font-medium
                            hover:bg-green-700">
                Hover :Duration-300
            </button>
        </div>
        <div>
            <button class="bg-green-500 rounded-3xl p-4 transition
                            duration-700 hover:opacity-30 hover:text-white
                            hover:font-medium">
                Hover :Duration-700
            </button>
        </div>
        <div>
            <button class="bg-green-500 rounded-3xl p-4 transition duration-1000
                            hover:text-white hover:font-medium">
                Hover :Duration-1000
            </button>
        </div>
    </div>
</body>
</html>

列印頁面