<p>真正顺滑的动画只依赖 transform 和 opacity；transition 类需与状态类（如 hover:scale-110）成对使用；animate- 类必须在 tailwind.config.js 中显式注册 keyframes 和 animation，且命名、引号、字符串格式须严格匹配。</p>
直接用 transition-all 或 animate-pulse 基本等于放弃性能控制——真正顺滑的动画只依赖 transform 和 opacity，其他属性要么卡顿，要么根本不动。
transition 类加了但没动画？检查起始态和结束态是否真实存在
单独写 transition-transform 在元素上，悬停时毫无反应，不是 bug，是设计如此。Tailwind 的 transition 类只声明“怎么变”，不触发“变”本身。
- 必须成对出现：基础样式（如
scale-100） + 状态变更（如hover:scale-110、group-hover:opacity-0或 JS 切换的 class） - 避免对不可过渡属性设 transition：
display: none、height: auto、text-decoration浏览器直接忽略，不报错也不动 -
transition-all会连box-shadow、filter一起过渡，容易卡顿或意外抖动；优先用transition-transform+transition-opacity
animate- 类不生效？keyframes 和 animation 必须在配置中严格配对注册
animate-skeleton-scan 写对了但不动，90% 是 tailwind.config.js 里漏注册了对应 keyframes 或 animation。Tailwind 不扫描 CSS 文件里的 @keyframes，必须显式声明。
-
theme.extend.keyframes中定义帧逻辑，键名（如'skeleton-scan'）必须和theme.extend.animation中引用的完全一致（包括短横线、大小写） - 百分比帧必须加引号：
'0%'✅，0%❌；属性值必须是字符串：backgroundPosition: '0% 50%'✅，backgroundPosition: 0% 50%❌ - 改完配置必须重启开发服务器，Tailwind 不热更动画类名
骨架屏光扫效果为什么不像？渐变背景 + background-position 位移缺一不可
animate-pulse 只是 opacity 呼吸，不是骨架屏那种“光扫过”的流动感。真实效果必须手写 @keyframes 并完整注册。
立即学习“前端免费学习笔记（深入）”；
- 容器不能是 inline 元素（不支持 background），必须有固定尺寸：
h-10、min-h-8、aspect-square等 - 渐变写法必须为：
bg-gradient-to-r from-transparent via-gray-200 to-transparent，且配bg-no-repeat和background-size: 200% 200%（否则位移跳变） - 已有背景色的元素，先加
bg-transparent清空，再叠加骨架渐变
JS 控制动画时卡顿？别读 clientHeight，改用 transform + requestAnimationFrame
反复读取 offsetWidth、clientHeight 会强制同步布局计算，打断渲染流水线。
- 别用
classList切换一堆w-1/4、w-1/2模拟 width 变化；改用el.style.transform = 'scaleX(0.7)' - 批量更新优先走
requestAnimationFrame：raf(() => el.style.transform = `scaleX(${progress})`) - 对长时动画（如 >500ms 缩放），可加
will-change: transform提前提示浏览器优化，但别滥用——过多图层分配反而拖慢
最常被忽略的是：动画容器的尺寸约束和背景层隔离。没有固定高宽，background-position 动画就飘；没有 bg-no-repeat 和 background-size: 200% 200%，光扫就断层。这些不是“可选配置”，是生效前提。
