Tailwind CSS - 過渡延遲

Tailwind CSS 過渡延遲是一個用於定義 CSS 過渡開始前的延遲的實用程式。

Tailwind CSS 過渡延遲類

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

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

Tailwind CSS 過渡延遲類的功能

delay-*： 類用於在過渡效果開始之前新增延遲。{*}在此指定可以根據需要設定的不同過渡延遲值。

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 Delay Classes
    </h2>
    <div class="grid grid-cols-2 gap-2">
        <div>
            <button class="bg-green-500 rounded-3xl p-4 w-44
                            transition-transform delay-300 ease-linear
                            hover:scale-90 hover:text-white 
                            hover:font-medium">
                Hover :Delay-300
            </button>
        </div>
        <div>
            <button class="bg-green-500 rounded-3xl p-4 w-44
                            transition-transform delay-500 ease-linear
                            hover:scale-90 hover:text-white 
                            hover:font-medium">
                Hover :Delay-500
            </button>
        </div>
        <div>
            <button class="bg-green-500 rounded-3xl p-4 w-44
                            transition-transform delay-700 ease-linear 
                            hover:scale-90 hover:text-white 
                            hover:font-medium">
                Hover :Delay-700
            </button>
        </div>
        <div>
            <button class="bg-green-500 rounded-3xl p-4 w-44
                            transition-transform delay-1000 ease-linear
                            hover:scale-90 hover:text-white 
                            hover:font-medium">
                Hover :Delay-1000
            </button>
        </div>
    </div>
</body>
</html>

列印頁面