Tailwind CSS 过渡

如果想要将元素的某一个属性从 “一个属性值” 在指定的时间内平滑地过渡到 “另一个属性值”，从而来实现动画效果，此时就需要 Tailwind CSS 的过渡类名了。

Tailwind CSS 过渡语法

在 Tailwind CSS 中，如果想要实现一个完整的过渡效果，我们需要 3 个方面的核心类名配合一起使用：过渡属性 + 持续时间 + 过渡曲线。

1. 过渡属性

过渡属性（对应 CSS 的 transition-property），用于告诉浏览器我们要对元素哪些属性进行操作。其中，常用的类名如下表所示。

“过渡属性” 类名
类名	对应 CSS	说明
transition-none	transition-property: none;	取消所有过渡
transition-all	transition-property: all;	针对所有属性
transition（默认）	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform...;	针对常用属性（比如颜色、背景、边框、阴影等）
transition-colors	transition-property: color, background-color, border-color...	仅对颜色属性过渡
transition-transform	transition-property: transform;	仅对变形属性过渡

2. 持续时间

持续时间（对应 CSS 的 transition-duration），用于定义该过渡动作需要多长时间完成，单位是毫秒（ms）。其中，常用的类名如下表所示。

“持续时间” 类名
类名	对应 CSS	说明
duration-75	transition-duration: 75ms;	极快
duration-150（默认）	transition-duration: 150ms;	默认
duration-300	transition-duration: 300ms;	正常
duration-500	transition-duration: 500ms;	较慢
duration-1000	transition-duration: 1000ms;	缓慢

3. 过渡曲线

过渡曲线（对应 CSS 的 transition-timing-function），用于定义过渡过程中速度如何变化，比如是 “匀速过渡”，还是 “先快后慢” 等。其中，常用的类名如下表所示。

“过渡曲线” 类名
类名	对应 CSS	说明
ease（默认）	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);	平滑曲线
ease-linear	transition-timing-function: linear;	匀速直线
ease-in	transition-timing-function: cubic-bezier(...);	缓入（先慢后快）
ease-out	transition-timing-function: cubic-bezier(...);	缓出（先快后慢）
ease-in-out	transition-timing-function: cubic-bezier(...);	平滑（两头慢，中间快）

4. 延迟过渡（可选）

有时候我们不希望过渡动作立刻发生，而是希望它 “等一会” 再开始。此时就需要使用 “delay-*” 相关类名来延迟过渡的开始（对应 CSS 的 transition-delay）。

语法：

delay-{时间}

说明：

比如 delay-75 表示延迟 75ms 才开始过渡。常用的类名包括 delay-75 (延迟 75ms)、delay-150、delay-300 等。

Tailwind CSS 过渡示例

接下来，我们通过几个简单的例子来讲解一下如何使用 Tailwind CSS 来定义元素的过渡效果。

示例 1：“悬停按钮” 的过渡效果

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body class="p-10">
    <button class="px-6 py-2 bg-gray-500 text-white rounded hover:bg-gray-800 cursor-pointer">
        生硬切换
    </button>
    <button class="px-6 py-2 ml-4 bg-green-500 text-white rounded hover:bg-green-700 cursor-pointer transition-colors duration-300 ease-in-out">
        丝滑过渡
    </button>
</body>
</html>

页面效果如下图所示。

分析：

对于第 1 个按钮来说，当鼠标移上去时会瞬间变色，显得比较生硬。而对于第 2 个按钮来说，由于我们加上了：

transition-colors duration-300 ease-in-out

这样当鼠标移上去时，颜色相关属性会耗费 300ms 时间平滑地渐变过去。实际上，像咱们的绿叶网，也大量地使用了过渡动画，小伙伴们可以仔细体验一下。

示例 2：“悬浮卡片” 的过渡效果

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body class="p-10 bg-gray-100">
    <div class="w-64 p-6 bg-white rounded-2xl shadow-sm border border-gray-100 cursor-pointer transition-all duration-300 hover:shadow-xl hover:-translate-y-2 hover:border-green-300">
        <h3 class="text-xl font-bold text-gray-800">绿叶网</h3>
        <p class="text-gray-500 mt-2 text-sm">绿叶网专注于教程的易懂性，让完全 0 基础的小白也能更快上手。</p>
    </div>
</body>
</html>

页面效果如下图所示。

Tailwind CSS 实现“悬浮卡片” 的过渡效果

分析：

在这个例子中，我们在 hover: 状态下改变了 3 个方面的内容：阴影大小、Y 轴位移（向上移动 8px）、边框颜色。

为了让这 3 个属性能够平滑过渡，我们在默认状态（非 hover）下使用了 transition-all duration-300。

常见问题

1. 我给元素定义了过渡效果，为什么鼠标移上去的时候过渡比较自然，但是鼠标移开的瞬间，就生硬地闪回原样呢？

这是无数前端新手都会踩的 “神坑”，包括我自己也曾经踩过这个坑。

之所以会出现这种情况，很可能是因为我们把 transition 相关的类名写到了 “hover:” 里面去了。

错误写法：

hover:transition-all hover:duration-300 hover:-translate-y-2

如果像上面这么写，此时表示的是 “只有鼠标悬停时、过渡功能才存在”。所以当鼠标移开，过渡功能会瞬间消失，元素当然就会被生硬地变回原样了。

小伙伴们要记住：transition、duration-*、ease-* 这 3 个类名，必须写在元素的默认基础类名里，而绝对不能加上 “hover:” 前缀。