Skip to Content

1. 过渡 (Transitions) - 平滑的状态变化

过渡是实现动画效果的基础。如果没有过渡，当一个属性改变时（比如 hover 时背景色变化），这个变化会是瞬间完成的，显得很生硬。过渡可以让这个变化在一个设定的时间内平滑地进行。

a. 核心类

类别常用类名说明
启用过渡transition启用所有可过渡属性的平滑过渡效果。
transition-colors, transition-opacity, transition-shadow, transition-transform只对特定类型的属性启用过渡，可以进行更精细的控制。通常直接用 transition 就够了。
持续时间 (Duration)duration-75, duration-100, duration-300, duration-500, duration-1000控制过渡效果完成所需的时间。duration-300 是一个非常通用的值。单位是毫秒。
缓动函数 (Timing Function)ease-linear, ease-in, ease-out, ease-in-out控制过渡的速度曲线。ease-in-out (先慢中快后慢) 是最常用、最自然的。
延迟 (Delay)delay-100, delay-300, delay-500控制过渡在触发后延迟多长时间才开始。

b. 使用方法

将这些类组合在一起，应用到你希望有动画效果的元素上即可。

黄金法则： 将过渡相关的类（transition, duration-*, ease-*）放在元素的默认状态上，而不是放在 hover: 或 focus: 等状态修饰符里。

示例：一个平滑变色的按钮

<button class="
  /* 基础样式 */
  py-2 px-4 bg-blue-500 text-white rounded
 
  /* 过渡效果定义 - 在默认状态下设置 */
  transition-all duration-300 ease-in-out
 
  /* 悬停时的目标样式 */
  hover:bg-red-500
">
  悬停看效果
</button>

分析：

  • transition-all: 告诉浏览器，所有可过渡的属性（这里是 background-color）都应该平滑过渡。你也可以用 transition-colors 进行更精确的控制。
  • duration-300: 过渡持续 300 毫秒。
  • ease-in-out: 过渡速度先慢后快再慢。
  • hover:bg-red-500: 当鼠标悬停时，目标背景色是红色。

因为在默认状态下定义了过渡，所以无论是从蓝色到红色（鼠标移入），还是从红色回到蓝色（鼠标移出），都会有平滑的动画效果。

2. 变换 (Transforms) - 移动、旋转、缩放

变换通常与过渡结合使用，以创建动态的视觉效果。

a. 核心类

类别常用类名说明
启用变换transform这是一个“标记类”，用于告诉浏览器这个元素可能会有变换，有助于性能优化。通常和 transition 一起使用。
缩放 (Scale)scale-50, scale-100, scale-110缩放元素。scale-100 是默认大小。可以分轴缩放：scale-x-125, scale-y-75。
旋转 (Rotate)rotate-45, rotate-90, rotate-180旋转元素。-rotate-45 表示反向旋转。
移动 (Translate)translate-x-4, translate-y-1/2, -translate-x-full移动元素。数值可以是比例尺单位，也可以是百分比。
倾斜 (Skew)skew-x-3, skew-y-6倾斜元素。
原点 (Transform Origin)origin-center, origin-top-left, origin-bottom设置变换的原点（例如，从哪里开始旋转或缩放）。

b. 使用方法

将变换类与状态修饰符（如 hover）和过渡类结合。

示例：一个悬停时放大并轻微上移的卡片

<div class="
  /* 基础样式 */
  p-6 bg-white rounded-lg shadow-md
  
  /* 过渡和变换的定义 */
  transition duration-300 ease-in-out transform
  
  /* 悬停时的目标变换样式 */
  hover:scale-105 hover:-translate-y-1 hover:shadow-xl
">
  <h3 class="text-lg font-bold">交互卡片</h3>
  <p class="text-gray-600">悬停在我身上看看效果。</p>
</div>

分析：

  • transition transform: 确保了 hover 状态下的 scale 和 translate 变换会平滑进行。
  • hover:scale-105: 悬停时放大到 105%。
  • hover:-translate-y-1: 悬停时向上移动 0.25rem。
  • hover:shadow-xl: 同时，阴影也变得更大，增强立体感。

3. 动画 (Animations) - 预设的关键帧动画

当你需要更复杂、可循环或自启动的动画时，就需要使用 animation 工具类。Tailwind 内置了一些常用的动画，并且可以轻松自定义。

a. 核心类

类别常用类名说明
预设动画animate-spin持续旋转，常用于加载指示器。
animate-ping一个向外扩散的波纹，常用于通知或提示。
animate-pulse缓慢地淡入淡出，常用于骨架屏（loading skeleton）。
animate-bounce上下弹跳，常用于“向下滚动”提示箭头。
动画控制motion-safe:*当用户在操作系统中开启了“减弱动态效果”时，可以通过这个修饰符来禁用动画，提升可访问性。
motion-reduce:*与上面类似，用于定义减弱动效时的样式。

b. 使用方法

直接将 animate-* 类添加到元素上即可。

示例 1：一个加载中的 Spinner

<div class="
  w-16 h-16 border-4 border-dashed border-blue-500 border-t-transparent rounded-full
  animate-spin
"></div>

分析：

  • 我们先用边框类创建了一个“缺口”的圆环。
  • 然后简单地加上 animate-spin，它就会不停地旋转，形成一个经典的加载动画。

示例 2：一个骨架屏加载效果

<div class="border border-gray-200 shadow rounded-md p-4 max-w-sm w-full mx-auto">
  <div class="animate-pulse flex space-x-4">
    <div class="rounded-full bg-gray-300 h-10 w-10"></div>
    <div class="flex-1 space-y-6 py-1">
      <div class="h-2 bg-gray-300 rounded"></div>
      <div class="space-y-3">
        <div class="grid grid-cols-3 gap-4">
          <div class="h-2 bg-gray-300 rounded col-span-2"></div>
          <div class="h-2 bg-gray-300 rounded col-span-1"></div>
        </div>
        <div class="h-2 bg-gray-300 rounded"></div>
      </div>
    </div>
  </div>
</div>

分析：

  • animate-pulse 应用在父容器上，使其所有子元素中的灰色占位符都产生同步的、缓慢的淡入淡出效果，模拟正在加载内容的感觉。

c. 自定义动画

如果内置动画不满足需求，你可以在 tailwind.config.js 中定义自己的关键帧动画。

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      keyframes: {
        'fade-in-down': {
          '0%': {
            opacity: '0',
            transform: 'translateY(-10px)'
          },
          '100%': {
            opacity: '1',
            transform: 'translateY(0)'
          },
        }
      },
      animation: {
        'fade-in-down': 'fade-in-down 0.5s ease-out'
      }
    },
  },
}

步骤：

  1. 在 theme.extend.keyframes 中定义一个 @keyframes 规则，命名为 fade-in-down。
  2. 在 theme.extend.animation 中定义一个新的动画类，也叫 fade-in-down，它引用了上面定义的关键帧，并设置了持续时间 0.5s 和缓动函数 ease-out。

现在，你就可以在 HTML 中直接使用 animate-fade-in-down 这个类了！

<div class="animate-fade-in-down">
  这个元素会从上方淡入。
</div>

总结

  • 过渡 (transition) 是最基础、最常用的，用于处理状态变化时的平滑效果。记住将过渡定义放在默认状态上。
  • 变换 (transform) 包括移动、旋转、缩放，通常与过渡结合，为交互增添动态感。
  • 动画 (animation) 用于预设的、可循环的效果，如加载、提示等。Tailwind 内置了几个实用的动画，并且可以轻松自定义。

通过组合这些工具，你可以用一种声明式、可维护的方式，在 Tailwind CSS 中创造出丰富而流畅的动画体验。

Last updated on
Map