用途:为 Tailwind CSS v4.3 项目提供 Transform、Transition、Animation 工具类的参考与组合用法,适用于元素缩放/旋转/位移/倾斜、配置过渡时长/缓动/延迟,以及应用 @keyframes 动画。
主要能力:变换类含 scale(含 scale-x/y)、rotate(支持负值 -rotate-45)、translate(x/y、负值)、skew(x/y、负值)与 origin 原点(center/top/bottom/left/right 及四角);过渡类含 transition 属性选择(transition、none、all、colors、opacity、transform、shadow)、duration(75 至 1000ms)、ease-linear/in/out/in-out、delay(0 至 1000ms);动画类含内置 animate-none/spin/ping/pulse/bounce,自定义动画需在 @theme 中通过 --animate-wiggle、--animate-wave 等定义,并用 @keyframes 编写。所有类均支持响应式前缀(sm:、md:、lg:)与状态前缀(hover:、focus:、group-hover:)。
使用方式:在 class 中组合变换、过渡与状态变体,例如悬停缩放按钮 <button class="scale-100 hover:scale-110 transition duration-200 ease-out">;旋转加载器 <div class="animate-spin">;错峰动画通过 delay-0/delay-150/delay-300 配合 animate-pulse 实现;复杂组合如 rotate-45 scale-110 translate-x-2 translate-y-4 transition-transform duration-500 ease-in-out。建议 transition-* 与 duration-* 配对,使用 ease-out/ease-in-out 使运动自然,移动优先,用 hover:/focus:/group-hover: 组合状态。
适用场景:UI 交互反馈、加载指示、入场与错峰动画、需控制动画节奏的界面组件。
限制与注意事项:性能上优先使用 transform 和 opacity,避免 left/top、visibility 与宽高变化;动画仅按需使用,重动画可考虑 will-change;无障碍须遵循 prefers-reduced-motion,资料给出的回退为 @media (prefers-reduced-motion: reduce) 下将 animation-duration、transition-duration 设为 0.01ms !important 并将 animation-iteration-count 设为 1 !important。详细参考可查阅 transform.md、transition.md、animation.md。其余如收费、价格与具体安装命令暂未提供。