Tailwind CSS - 过渡时间函数

过渡时间函数（缓动函数）现代指南

在 Tailwind CSS 中，过渡时间函数（也称为“缓动函数，easing functions”）控制元素过渡的加速和减速。它们能让你创建感觉自然、精致的动画，而不是生硬、机械的效果。

核心缓动工具类

要使用缓动函数，你还必须将 transition 和 duration-* 工具类应用于元素。缓动类决定了过渡在其指定持续时间内如何进行。

类名	CSS transition-timing-function	描述
ease-linear	linear	从开始到结束保持恒定速度。最适合机械或不自然的运动。
ease-in	cubic-bezier(0.4, 0, 1, 1)	缓慢开始并加速。适用于动画进入屏幕的元素。
ease-out	cubic-bezier(0, 0, 0.2, 1)	快速开始并减速。作为 UI 交互最常见的选择，因为它感觉响应迅速。
ease-in-out	cubic-bezier(0.4, 0, 0.2, 1)	缓慢开始，在中途加速，然后在结束时再次减速。最适用于元素从一个点移动到另一个点的动画。

实际应用：比较 UI 卡片上的缓动效果

理解缓动效果的最佳方式是亲眼看看它的实际作用。以下示例展示了四张卡片。当你将鼠标悬停在每张卡片上时，它将放大并改变其阴影。每张卡片都使用不同的时间函数，让你能够直观地比较动画“感受”上的差异。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Transition Timing Functions</title>
    <link href="/dist/output.css" rel="stylesheet">
</head>
<body class="bg-slate-200 dark:bg-slate-900 p-8">

    <div class="text-center mb-10">
        <h1 class="text-3xl font-bold text-slate-800 dark:text-slate-100">Compare Easing Functions</h1>
        <p class="text-slate-600 dark:text-slate-400">Hover over the cards to see the difference.</p>
    </div>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
        <!-- 卡片模板 -->
        <div class="card ease-linear">ease-linear</div>
        <div class="card ease-in">ease-in</div>
        <div class="card ease-out">ease-out</div>
        <div class="card ease-in-out">ease-in-out</div>
    </div>

    <!-- CSS 可以通过在你的输入 CSS 中使用 @apply 进行抽象，以获得更简洁的 HTML -->
    <style>
      .card {
        @apply bg-white dark:bg-slate-800 rounded-lg shadow-md p-8 flex items-center justify-center font-mono text-slate-700 dark:text-slate-300 transition-all duration-500 hover:shadow-2xl hover:scale-105 hover:text-indigo-500;
      }
    </style>

</body>
</html>

专业提示：缓动效果的心理学

缓动函数的选择可以微妙地影响用户对你界面的感知：

• ease-out：感觉快速且响应灵敏，因为动画会立即开始。对于大多数 UI 交互，如按钮点击或模态弹窗，这是一个极佳的默认选择。
• ease-in：如果用于用户主动触发的动作，可能会感觉迟缓，但对于自动进入场景的元素则很有效。
• ease-in-out：看起来更深思熟虑且优雅。非常适合元素跨屏幕移动等较长、更明显的动画。

常见错误与调试

最常见的错误是忘记添加必要的 transition 和 duration-* 类。像 ease-out 这样的缓动函数类单独使用时无效。它只修改一个现有的过渡。

错误示例：<div class="hover:scale-110 ease-out">...</div>（缺少 transition 和 duration）

正确示例：<div class="transition duration-300 ease-out hover:scale-110">...</div>