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-*： 类用于为过渡属性添加时长。* 这里指定了可以根据需要设置的不同过渡时长值。

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

打印页面