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-*： 类用于在过渡效果开始之前添加延迟。{*}在此指定可以根据需要设置的不同过渡延迟值。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

Tailwind CSS 过渡延迟示例

以下示例将说明指定过渡效果的不同过渡延迟。

示例

Open Compiler

<!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>

打印页面