第 6 章 动画
在本章中，我们将看看动画（animation）和过渡（transition），它们可以让你通过 CSS 属性在页面上移动元素。
Tailwind 并没有完整实现 CSS 动画和变换（transformation）的全部功能——毕竟对一个工具类框架来说，这要求太高了。
它确实为一些常见的动画行为提供了实用的默认设置，但即便是 Tailwind 官方文档也承认，这些默认值只是建议而已。实际上，大多数使用动画的项目都需要自己定义自定义的动画行为。
实用的小动画
Tailwind 提供了四个完整的动画工具类：animate-bounce、animate-ping、animate-pulse 和 animate-spin。 这些类不仅定义了动画所需的 CSS，还包含对应的关键帧（keyframes），所以你可以直接在元素上使用它们。
第一个工具类 animate-bounce 表示一个持续一秒的动画，它让元素的垂直位置向下移动自身高度的 25%，然后再回到原来的位置，形成一个轻微的“弹跳”效果。 比如，你可以用 hover:animate-bounce 实现一种“你当前在这里”的提示效果。
第二个工具类 animate-ping 适合做通知类的动画。它会在一秒内从正常大小和不透明度，变为两倍大小并完全透明（不透明度为 0），从而形成一个明显的“信号脉冲”效果。
第三个工具类 animate-pulse 常用于加载时的占位动画，比如页面加载时先显示一些占位元素，等服务器返回数据后再替换掉。 这个动画会在两秒内在 0.1 到 0.5 的不透明度之间来回变化，产生一种轻微的淡入淡出效果。
最后一个工具类 animate-spin 会让元素在一秒内旋转 360 度，常用于加载状态的旋转指示图标。 如果你想让一个 SVG 或图片转动，只需要在该 SVG 或 <img> 元素上添加 animate-spin（注意是加在元素本身，而不是它的容器上），它就会旋转起来。
这些动画都可以通过 animate-none 来取消。
过渡效果
在 CSS 中，你可以指定一个或多个属性在值发生变化时“平滑过渡”，而不是瞬间变化。 在完整的前端应用中，这种变化通常是通过 JavaScript 修改元素的 CSS 类名来实现的。
在 Tailwind 中，你也可以仅通过 CSS 修饰符（modifiers）来控制某些属性的变化。 例如，一个元素的类名是 "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-colortransition-opacitytransition-shadowtransition-transform
不过，要让过渡效果真正可见，还需要指定过渡持续的时间。 默认情况下，持续时间是 0（可以在 Tailwind 配置中修改）。
Tailwind 提供了 duration-{毫秒} 这一类工具类，其中的毫秒数可以是： 75、100、150、200、300、500、700 或 1000。
这些数字表示过渡持续的毫秒数。 此外，你还可以使用任意自定义值的语法（arbitrary value syntax）来指定其他时长。
你还可以使用 delay-{毫秒} 来设置过渡效果的延迟开始时间。 它的取值范围和 duration-{毫秒} 一样，可以用那些固定数值（如 75、100、150 等）或任意自定义值。 这个数字表示过渡在开始前需要等待的毫秒数。
默认情况下，过渡是线性的，也就是说属性变化会以均匀的速度进行。 这个默认效果对应的 Tailwind 工具类是 ease-linear。
如果你希望属性变化在开始时比较慢，中间加速，接近结束时再慢下来，可以使用 ease-in-out。 （当然，你也可以选择只在变化的一端放缓，比如用 ease-in 或 ease-out。）
这些缓动效果（ease）之间的差别虽然细微，但在涉及运动的场景中，能让动画看起来更自然、更有节奏感，也更吸引人。
变换（Transformation）
CSS 允许你以多种方式对元素的盒模型进行变换，比如调整大小、位置、旋转角度或倾斜程度。 Tailwind 也为这些变换提供了一些不错的默认设置。 当这些变换与过渡（transition）和动画（animation）结合使用时，你可以非常轻松地创建出很棒的视觉效果。
调整缩放比例
Tailwind 允许你使用 scale-{百分比} 这一类工具类来改变元素的缩放比例，其中的后缀就是缩放的百分比。 默认提供的（非自定义）选项有：0、50、75、90、95、100、105、110、125 和 150。
这些数值的设计主要是为了实现一些细微的动画效果，比如： transition duration-1000 hover:scale-110 这会让元素在鼠标悬停时，在 1 秒内轻微放大。
如果你再加上 hover:shadow-lg，看起来就像这个元素在悬停时稍微“靠近”用户一样。
如果你只想在一个方向上缩放，也可以使用： scale-x-{百分比} 或 scale-y-{百分比}， 可选的数值范围与上面相同，比如 scale-x-95 或 scale-y-125。
旋转
你可以使用 rotate-{角度} 来让元素旋转，其中的角度值表示 顺时针旋转 的度数。 Tailwind 预设的可选值包括：0、1、2、3、6、12、45、90 和 180。 当然，你也可以使用任意自定义值（arbitrary value），并使用不同的单位。
如果你想让元素 逆时针旋转，可以使用 -rotate-{角度}，取值范围与上面相同。
这些设置主要是为了方便实现一些细微的视觉效果。 默认情况下，旋转是围绕元素中心进行的，Tailwind 用 origin-center 来表示这个默认的旋转中心。
你也可以通过修改旋转原点来改变旋转的轴心位置。 添加 origin- 前缀并结合方向或角落后缀即可，比如： origin-top、origin-bottom-right 等。
倾斜与位移
对于倾斜（skew），Tailwind 提供了以下类名： skew-x-{角度}、-skew-x-{角度}、skew-y-{角度} 和 -skew-y-{角度}。 它们的角度值可选范围为：0、1、2、3、6 或 12，单位都是度（°）。
如果你想让元素移动位置，可以使用以下类名： translate-x-{数值}、-translate-x-{数值}、translate-y-{数值} 或 -translate-y-{数值}。 这些类名会让元素在对应方向上平移，数值的取值方式与 padding、margin 等类似， 也就是说每个数值代表 0.25rem 的移动距离。
正数表示向右（x 方向）或向下（y 方向）移动，负数表示向左或向上移动。
除了数字后缀外，还有一些特殊的后缀可用：
px：表示移动 1 像素full：表示沿该方向移动自身的完整尺寸（100%）1/2：表示沿该方向移动自身尺寸的一半
例如： translate-x-full 表示水平移动自身宽度的 100%， translate-y-1/2 表示垂直移动自身高度的一半。
其他外观相关的效果
你还可以通过 Tailwind 改变光标样式和文字行为。
在用户将鼠标悬停在元素上时，可以使用以下工具类来覆盖默认的光标样式： cursor-auto、cursor-default、cursor-move、cursor-not-allowed、cursor-pointer、cursor-text 和 cursor-wait。
如果你想控制文本的可选性，可以使用：
select-none：禁止用户选中文字（防止复制粘贴）select-text：允许用户正常选中文字select-all：点击后自动全选该元素内的所有文字
（不过，不建议使用 select-all。这种做法对用户体验不太友好，但有时在某些安全或合规场景下可能会被要求这样做。）
此外，你可以用 resize 类让元素可以手动调整大小。 如果只想允许一个方向调整，可以使用：
resize-x：只允许水平方向调整resize-y：只允许垂直方向调整 而resize-none则可以禁用调整大小的功能。
接下来，我们将看看 Tailwind 是如何让网站在不同屏幕尺寸下都能保持良好外观的。