在这一章中，我们要看一下动画和转换，它允许你使用 CSS 属性在页面上移动项目。Tailwind 并没有提供一个完整的 CSS 动画和转换行为的实现 —— 这对一个实用框架来说是一个很大的要求。它确实为常见的行为提供了有用的默认值，但即使是 Tailwind 的文档也承认，这些只是建议，大多数使用动画的项目都需要定义自定义行为。

有用的小动画

Tailwind 提供了四个完整的动画工具：animate-bounce, animate-ping, animate-pulse 和 animate-spin。这些类同时定义了一个动画的 CSS 和一组关键帧，所以你可以在一个元素上按原样使用它们。

第一个工具类，animate-bounce，描述了一个一秒钟的过渡，将垂直位置向下平移 25% 的元素大小，然后再回到原来的位置，所以它给人一种轻微的向下反弹的感觉。例如，你可以使用 hover:animate-bounce 来给出一个漂亮的 “你在这里” 的效果。

你可以用第二个工具类 animate-ping 给通知效果做一个小动画，这是一个一秒钟的动画，从常规大小和不透明度到两倍大小和 0 不透明度，这给出了一个相当有效的信号脉冲效果。

一个常见的加载行为是让虚拟元素显示，并在服务器提供数据时逐渐被取代。第三个 Tailwind 工具类，animate-pulse，给你一个在 0.1 不透明度和 0.5 之间的两秒钟过渡，在元素上产生一个轻微的淡化效果。

最后一个工具类，animate-spin，在一秒钟内使一个物体完全旋转 360 度的动画。它被设计为用于诸如加载状态标记的东西。如果你有一个你想使用的 SVG 或图像，将 animate-spin 添加到 SVG 或图像元素（而不是它的容器），该元素就会旋转。

所有这些都可以被 animate-none 清除。

过度动画

在 CSS 中，你可以指定一个或多个属性在改变数值时应逐渐过渡，而不是即时改变。在一个完整的客户端应用程序中，你可能通过使用 JavaScript 来修改一个元素上的 CSS 类来改变数值。在 Tailwind 中，你可以使用修改器，仅仅在 CSS 中管理一些 CSS 属性的变化。例如，一个具有 bg-green-500 hover:bg-yellow-500 类列表的元素，当用户在它上面悬停时，颜色将从绿色变为黄色，而 Tailwind 的过渡工具可以使之逐渐发生。

在大多数情况下，你会声明一个元素有一个过渡类，这将导致该元素对 CSS 属性、背景色、边框色、盒影、颜色、填充、不透明度、描边和变换使用过渡效果。通常这就是你想过渡的所有属性，但如果你需要过渡其他属性，你可以使用 transition-all 来把所有属性放在过渡的旗帜下。

如果你想限制过渡到某些属性，Tailwind 提供了几种选择。通常情况下，你会使用这些，因为其他属性有变化，你希望立即发生：transition-color, transition-opacity, transition-shadow, transition-transform。

为了使过渡实际可见，你需要指定一个过渡发生的持续时间。默认值是 0（但可以在 Tailwind 配置中改变），Tailwind 提供了 duration-{milliseconds}系列工具，其中后缀是 75、100、150、200、300、500、700 或 1000中的一个，表示过渡应覆盖的毫秒数，并允许使用任意值语法。

你也可以用 delay-{milliseconds}和同一组数字或任意值来延迟过渡的开始，表示过渡应该开始前的毫秒数。

默认情况下，过渡是线性应用的，这意味着对属性的改变发生在一系列相同大小的步骤中。该默认值由 Tailwind 工具表示，ease-linear。如果你想让属性的变化开始得更慢，加快，然后在接近结束时减慢，你可以使用 ease-in-out。(或者，如果你只想在变化的一侧放慢速度，你可以使用 ease-in 或 ease-out）。缓和的区别是微妙的，但特别是在运动方面，它可以提供一种变化加速然后减速的感觉，这种方式可以看起来更自然和吸引人。

变形动画

CSS 允许你以各种方式转变一个元素的方框，改变其大小、位置、旋转或倾斜。Tailwind 再次为你提供了一些合理的默认值，当它与过渡和动画相结合时，可以让你轻松地建立一些伟大的效果。

改变比例

Tailwind 让你用 scale-{percentage}系列来改变一个元素的比例，其中后缀是要缩放的百分比。默认的、非任意的选项是 0、50、75、90、95、100、105、110、125 和 150，我认为这些选项是为了实现微妙的效果，比如 “transition-duaration-1000 hover:scale-110“（这将使一个元素在一秒钟内的悬停过程中变得稍微大一些）。加上 hover:box-shadow-lg，就会显得元素在悬停时离用户越来越近。

如果你只想在一个方向上缩放，你可以使用 scale-x-{百分比} 或 scale-y-{百分比}，并使用同一组数字（scale-x-95，scale-y-125，以此类推）。

旋转

你可以用 rotate-{degrees} 来旋转一个元素，这是一个若干度数的顺时针变换。提供的选项有 0、1、2、3、6、12、45、90 和 180，任意的数值可以使用不同的单位。用 -rotate-{degrees}和同样的数字可以实现逆时针旋转。

同样，这里的设计是为了方便小的效果。默认情况下，旋转是围绕元素中间的一个轴，Tailwind 将其称为原点-中心。你可以通过在 origin- 上添加你在其他地方看到的同样的四个方向和四个角的后缀来移动原点（例如，origin-top、origin-bottom-right，等等）。

倾斜和平移

对于倾斜，有 skew-x-{degrees}、-skew-x-{degrees}、skew-y-{degrees} 和 -skew-y-{degrees}，它们以数字后缀 0、1、2、3、6 或 12 作为倾斜度数，作为提供选项。

你可以用 translate-x-{size}、-translate-x-{size}、translate-y-{size} 或 -translate-y-{size} 移动一个元素，每个选项都有一个数字后缀。这将使元素沿着方向移动，使用的数字比例与你在填充、边距等方面看到的相同，其中每个数字代表 0.25rem。正的方向是右和下，负的方向是左和上。

除了数字集，你还有后缀 px 表示一个像素，full 表示在该维度上精确地移动这个尺寸，1/2 表示在该维度上移动其一半的尺寸，如 translate-x-full 或 translate-y-1/2。

其它表现

你还可以对光标和文本做其他改变。你可以通过使用 cursor-auto、cursor-default、cursor-move、cursor-not-allowed、cursor-pointer、cursor-text 和 cursor-wait 这些工具来覆盖用户在悬停时看到的光标。

你可以在一个元素中用 select-none 来禁止文本的复制和粘贴，用 select-text 来允许它，或者用 select-all 来使整个文本在点击时自动选择。(请不要这样做。这对用户是不利的，但你可能会被要求这样做，因为某些被认为是安全或合规的原因。）

你也可以用 resize 给一个元素一个调整手柄，用 resize-x 或 resize-y 将手柄限制在一个方向上，用 reset-none 将其重置。

接下来，让我们看看 Tailwind 如何让我们的网站在不同的屏幕尺寸下看起来都很好。