Tailwind 并未提供完整的 CSS 动画和变换行为实现。然而，它为常见行为提供了有用的默认设置。Tailwind 文档承认，这些仅是建议，大多数使用动画的项目都需要定义自定义行为。

工具类

Tailwind 提供了四个完整的动画工具类——.animate-spin、.animate-pulse、.animate-bounce 和 .animate-ping。这些类定义了 CSS 动画以及用于元素上的关键帧。

第一个工具类 .animate-spin 会在一秒内使对象完成 360 度的旋转。它专为加载状态标记等场景设计。如果我们有一个想使用的 SVG 或图像，只需将 .animate-spin 添加到 SVG 或图像元素上（而非其容器），该元素就会旋转。

另一种常见的加载行为是显示占位元素，并随着服务器逐步提供数据而逐渐替换它们。第二个 Tailwind 工具类 .animate-pulse 提供了在 1 与 0.5 透明度之间持续两秒的过渡效果，使元素产生轻微的淡入淡出感。

第三个工具类 .animate-bounce 描述了一个持续一秒的垂直位置变换：先向下移动元素自身高度的 25%，然后再返回原始位置，从而产生轻微的下跳效果。

作者注：这个效果非常适合用作 .hover:animate-bounce，以实现“你在这里”的视觉反馈。

我们还可以通过第四个工具类 .animate-ping 为通知效果添加一点动画，它是一个持续一秒的动画，从正常大小和透明度变为两倍大小和 0 透明度，从而产生非常有效的信号脉冲效果。

以上所有动画均可通过 .animate-none 取消。

过渡效果

在 CSS 中，我们可以指定一个或多个属性在值发生变化时渐进式过渡，而不是立即改变。在客户端应用中，我们可能通过 JavaScript 修改元素的 CSS 类来改变值。在 Tailwind 中，我们可以使用前缀仅通过 CSS 来管理部分 CSS 属性变化。例如，一个类列表为 "bg-green-500 hover:bg-yellow-500" 的元素，在用户悬停时会从绿色渐变到黄色。Tailwind 的过渡工具类可以让这一过程平滑发生。

在大多数情况下，我们声明一个元素具有 .transition 类，这会使该元素对以下 CSS 属性启用过渡效果：background-color、border-color、box-shadow、color、fill、opacity、stroke 和 transform。通常这些就是我们想要过渡的全部属性，但若需要过渡其他属性，可以使用 .transition-all 将所有属性纳入过渡范围。

限制过渡范围

如果希望将过渡限制在特定属性上，Tailwind 提供了多种选择。通常我们使用这些是因为其他属性的变化需要立即生效。

• .transition-colors
• .transition-opacity
• .transition-shadow
• .transition-transform

为了让过渡效果可见，我们需要指定过渡持续的时间。默认值为 0（但可在 Tailwind 配置中更改）。Tailwind 提供了 .duration-{milliseconds} 系列工具类，其中后缀为 75、100、150、200、300、500、700 或 1000，表示过渡应覆盖的毫秒数。

我们也可以使用 .delay-{milliseconds} 延迟过渡的开始，同样使用上述数字，表示过渡应在多少毫秒后启动。

默认情况下，过渡是线性应用的，意味着属性变化以一系列大小相同的步骤进行。这种默认行为由 .ease-linear 表示。如果我们希望属性变化开始较慢，然后加速，最后接近结束时再减速，可以使用 .ease-in-out。我们也可以单独使用 .ease-in 或 .ease-out，仅在变化的一侧实现减速。这种缓动差异虽然细微，但在运动效果中尤其能带来一种加速后减速的感觉，使变化看起来更自然、更具吸引力。

我们将在下面的代码沙箱中尝试以下动画属性：

• transition-none 搭配 duration-500
• transform 搭配 transition-all 搭配 delay-500

按钮的其他结构属性如下代码所示：

注意：尝试不同的属性来创建动画。