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 类的组合，主要设置指定元素的默认过渡速度。

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

打印页面