tailwindcss-transforms

Tailwind CSS v4.3 变换、过渡和动画工具类完整参考：变换（`scale-*`、`rotate-*`、`translate-*`、`skew-*`、`origin-*`；以及相关的 `zoom-*`，自 v4.3 起提供）、过渡（`transition-*` 属性指定、`duration-*`、`ease-*` 缓动函数、`delay-*`）和动画（内置 `animate-*` 工具类及自定义 `@keyframes`）。

涵盖变换、过渡和动画的组合用法（悬停缩放、加载动画、错开延迟）、性能建议（优先使用 transform/opacity），以及必须提供的 prefers-reduced-motion 无障碍回退方案。

Tailwind CSS v4.3 变换与动画

Tailwind CSS v4.3 中变换、过渡和动画工具类的完整参考。

变换工具类

缩放

通过缩放（调整大小）变换元素。

<div class="scale-50">50%</div>
<div class="scale-100">100%</div>
<div class="scale-125">125%</div>
<div class="scale-150">150%</div>
<div class="scale-x-50">Scale X only</div>
<div class="scale-y-75">Scale Y only</div>

响应式：sm:scale-125、md:scale-150、lg:scale-100 状态：hover:scale-110、focus:scale-105、group-hover:scale-125

旋转

按指定角度旋转元素。

<div class="rotate-0">0°</div>
<div class="rotate-45">45°</div>
<div class="rotate-90">90°</div>
<div class="rotate-180">180°</div>
<div class="-rotate-45">-45°</div>

响应式：sm:rotate-90、md:rotate-180、lg:rotate-0 状态：hover:rotate-45、focus:rotate-90

平移

沿 X 轴和 Y 轴移动元素。

<div class="translate-x-0">No translation</div>
<div class="translate-x-2">X direction</div>
<div class="translate-y-4">Y direction</div>
<div class="translate-x-6 translate-y-8">Both axes</div>
<div class="-translate-x-2">Negative X</div>
<div class="-translate-y-4">Negative Y</div>

响应式：sm:translate-x-4、md:translate-y-8 状态：hover:translate-y-2、focus:translate-x-1

倾斜

沿 X 轴和 Y 轴倾斜元素。

<div class="skew-x-3">Skew X</div>
<div class="skew-y-6">Skew Y</div>
<div class="skew-x-3 skew-y-6">Both skew</div>
<div class="-skew-x-3">Negative skew</div>

响应式：sm:skew-x-6、md:skew-y-3 状态：hover:skew-x-2、group-hover:skew-y-4

变换原点

设置变换操作的原点。

<div class="origin-center">Default center</div>
<div class="origin-top">Top</div>
<div class="origin-bottom">Bottom</div>
<div class="origin-left">Left</div>
<div class="origin-right">Right</div>
<div class="origin-top-left">Top-left</div>
<div class="origin-top-right">Top-right</div>
<div class="origin-bottom-left">Bottom-left</div>
<div class="origin-bottom-right">Bottom-right</div>

响应式：sm:origin-top、md:origin-bottom-right 状态：hover:origin-left、focus:origin-center

过渡工具类

过渡属性

为指定属性启用过渡效果。

<div class="transition">All properties</div>
<div class="transition-none">No transitions</div>
<div class="transition-all">All properties</div>
<div class="transition-colors">Color changes</div>
<div class="transition-opacity">Opacity changes</div>
<div class="transition-transform">Transform changes</div>
<div class="transition-shadow">Shadow changes</div>

响应式：sm:transition-colors、md:transition-transform 状态：hover:transition-all、focus:transition-opacity

持续时间

设置过渡或动画的持续时间。

<div class="duration-75">75ms</div>
<div class="duration-100">100ms</div>
<div class="duration-150">150ms</div>
<div class="duration-200">200ms</div>
<div class="duration-300">300ms</div>
<div class="duration-500">500ms</div>
<div class="duration-700">700ms</div>
<div class="duration-1000">1000ms</div>

响应式：sm:duration-200、md:duration-500 常用：hover:duration-300、focus:duration-200

计时函数（缓动）

控制过渡或动画的加速曲线。

<div class="ease-linear">Linear</div>
<div class="ease-in">Ease in (slow start)</div>
<div class="ease-out">Ease out (slow end)</div>
<div class="ease-in-out">Ease in-out</div>

响应式：sm:ease-in、md:ease-out 状态：hover:ease-linear、focus:ease-in-out

延迟

在过渡或动画开始前添加延迟。

<div class="delay-0">0ms</div>
<div class="delay-75">75ms</div>
<div class="delay-100">100ms</div>
<div class="delay-150">150ms</div>
<div class="delay-200">200ms</div>
<div class="delay-300">300ms</div>
<div class="delay-500">500ms</div>
<div class="delay-700">700ms</div>
<div class="delay-1000">1000ms</div>

响应式：sm:delay-150、md:delay-300 错开效果：为动画依次设置延迟

动画工具类

动画

应用内置动画或自定义 @keyframes。

<div class="animate-none">No animation</div>
<div class="animate-spin">Rotating spinner</div>
<div class="animate-ping">Pulsing beacon</div>
<div class="animate-pulse">Fading pulse</div>
<div class="animate-bounce">Bouncing motion</div>

<div class="animate-wiggle">Wiggle motion</div>
<div class="animate-wave">Wave motion</div>

响应式：sm:animate-spin、md:animate-bounce 响应式禁用：lg:animate-none

自定义关键帧

使用 @keyframes 定义自定义动画。

/* In your CSS or Tailwind config */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideInUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideInDown {
  from {
    transform: translateY(-20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideInLeft {
  from {
    transform: translateX(-20px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideInRight {
  from {
    transform: translateX(20px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes scaleIn {
  from {
    transform: scale(0.9);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

组合变换、过渡与动画

示例 1：带过渡效果的悬停缩放

<button class="scale-100 hover:scale-110 transition duration-200 ease-out">
  Hover me
</button>

示例 2：带动画的旋转加载指示器

<div class="animate-spin">
  <svg class="w-8 h-8"></svg>
</div>

示例 3：带延迟的错开动画

<div class="space-y-2">
  <div class="animate-pulse delay-0">Item 1</div>
  <div class="animate-pulse delay-150">Item 2</div>
  <div class="animate-pulse delay-300">Item 3</div>
</div>

示例 4：复杂变换组合

<div class="rotate-45 scale-110 translate-x-2 translate-y-4 transition-transform duration-500 ease-in-out">
  Complex transform
</div>

示例 5：基于原点的缩放

<div class="origin-bottom scale-100 hover:scale-150 transition-transform duration-300">
  Scale from bottom
</div>

最佳实践

1. 为过渡设置持续时间：始终将 transition-* 与 duration-* 搭配使用
2. 添加缓动效果以实现平滑动画：使用 ease-out 或 ease-in-out，让运动更自然
3. 移动优先：应用基础变换，并使用响应式变体适配更大的屏幕
4. 性能：使用 transform 和 opacity 以获得最佳性能
5. 无障碍：动画应遵循 prefers-reduced-motion 设置
6. 组合运算符：使用 hover:、focus:、group-hover: 等状态变体

性能提示

• 使用 transform 代替 left/top 进行定位
• 使用 opacity 代替 visibility 实现淡入淡出效果
• 优先使用 scale，而不是更改 width/height
• 仅在必要时应用动画
• 使用 animation-delay 实现错开效果
• 对开销较大的动画，可考虑使用 will-change

无障碍注意事项

/* Respect user preferences */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

资源

• Tailwind CSS 变换文档
• Tailwind CSS 过渡文档
• Tailwind CSS 动画文档
• MDN CSS 变换
• MDN CSS 动画

详细参考

• transform.md - 需要查阅 scale/rotate/translate/skew/origin 或 zoom-* 的完整类参考时加载
• transition.md - 需要查阅 transition 属性、duration、easing 或 delay 的完整类参考时加载
• animation.md - 需要查阅完整的内置动画类参考或自定义 @keyframes 模式时加载