SuperAPI AI 工具集

tailwindcss-animations

前端与建站

查看项目

更新于 10-15 23:41

技能介绍

用途:面向 Tailwind CSS 项目,提供动画与过渡的类名用法参考,覆盖内置动画、过渡控制、变换工具、自定义关键帧及无障碍与性能注意事项。

主要能力: 一、内置动画:animate-spin(加载旋转)、animate-ping(雷达脉冲通知)、animate-pulse(骨架屏淡入淡出)、animate-bounce(垂直弹跳)。 二、过渡:transition-none/all/默认/colors/opacity/shadow/transform 控制参与过渡的属性;duration-75 至 duration-1000 控制时长;ease-linear/in/out/in-out 控制缓动;delay-75 至 delay-500 控制延迟。 三、变换:scale(含 scale-x/scale-y)、rotate(含负值与 180 翻转)、translate(x/y,含负值)、skew(x/y),配合 transform 与 transition-transform 使用;origin-* 控制变换原点。 四、自定义动画(v4):在 @theme 中通过 --animate-* 变量配合 @keyframes 定义,如 --animate-fade-in: fade-in 0.5s ease-out;自定义缓动可用 --ease-* 定义 cubic-bezier。 五、无障碍:使用 motion-safe: / motion-reduce: 前缀按用户偏好启用或禁用动画,也可用全局 prefers-reduced-motion 媒体查询将动画与过渡时长压缩至 0.01ms。 六、常见模式:悬停卡片上浮、按钮按下缩放(active:scale-95)、加载点、滚动淡入(配合 Intersection Observer)、骨架屏、汉堡按钮变 X。

使用方式:将上述类名直接写在 HTML 元素的 class 中;组件级进入/离开过渡可配合 Headless UI 等库。

限制与建议:优先使用 transform/opacity 等 GPU 加速属性,避免用 left 等触发重绘;优先用具体过渡属性而非 transition-all;UI 反馈动画时长保持较短;will-change 谨慎使用。资料未提供安装命令、版本要求与授权收费信息。