Tailwind的transition类仅设置过渡属性和时长，不定义起止状态，需配合hover/focus/JS触发样式变化才能生效；animate类需正确配置keyframes并确保初始状态不冲突。
单独加 transition 或 animate- 类不会动——它们只是 CSS 声明的搬运工，不负责触发、也不管起止状态。
transition 类为什么加了没反应
根本原因：Tailwind 的 transition 系列类（如 transition-transform、transition-opacity）只设置 transition-property 和默认时长，不定义“从哪来、到哪去”。浏览器需要两个明确样式才能插值过渡。
- ❌ 错误写法：
<div class="transition-all"> —— 没有 hover/focus/JS 切换，压根没变化可过渡 <li>✅ 正确写法：<code><div class="transition-transform duration-300 hover:scale-110"> —— 基础态（默认缩放）→ 悬停态（<code>scale-110），且duration-300和transition-transform都在常态类里 - ⚠️ 常见陷阱：
hover:duration-300无效；duration-300单独写但没配任何transition-类，CSS 中不会生成transition-duration - ✅ 安全首选：
transform和opacity—— GPU 加速、无重排、浏览器优化成熟。用transition-transform + hover:rotate-6或transition-opacity + opacity-0 - ✅ 可用但需技巧：
max-height（菜单展开）、border-bottom-width（下划线滑入）、伪元素::before+scaleX()（替代text-decoration） - ❌ 避免硬刚：
width/height（v3.0+ 默认禁用transition-width）、display（hidden不可过渡）、background-image（渐变无法直接过渡，得用伪元素叠opacity） - ✅ 必须把 keyframes 放进
theme.extend.keyframes，键必须是字符串'0%'或'from'，值必须是标准 CSS 属性名字符串：{ transform: 'translateX(-100%)' } - ❌
'0%': { translateX: '-100%' }无效（translateX不是标准属性）；'0%': { opacity: 0.3 }无效（值必须是字符串'0.3'） - ✅
animation工具类要写完整声明：'fadeIn': 'fadeIn 300ms ease-in forwards'，缺timing-function或单位（ms/s）会被忽略 - ⚠️ 最容易被忽略：元素带
opacity-0或hidden，会盖掉 keyframes 的from状态。要么移除初始隐藏，要么确保forwards填充模式生效 - ❌ 别反复读
clientHeight、offsetWidth—— 强制同步布局计算，一帧内多次读取就拖垮帧率 - ❌ 别用
classList.toggle('w-1/4', 'w-1/2')模拟宽度变化 ——w-*触发重排；改用el.style.transform = 'scaleX(0.7)' - ✅ 批量更新走
requestAnimationFrame：raf(() => el.style.opacity = progress) - ✅ 长动画（>500ms）可加
will-change: transform提示浏览器提前优化，但别滥用，否则首次渲染反而更慢
哪些属性真能平滑过渡
不是所有 CSS 属性都适合 transition。选错目标，动画就卡顿、跳变，甚至完全静默失效。
自定义 keyframes 动画总不生效
配置写错位置、语法不合法、或初始样式覆盖了动画起点，都会导致 animate- 类挂上去却纹丝不动。
立即学习“前端免费学习笔记（深入）”；
JS 控制过渡时为啥卡顿
性能崩塌往往来自隐式重排（layout thrashing）或低效的 DOM 操作，而不是动画本身。
最常被漏掉的一点：所有 transition- 和 duration- 类必须共存于元素的常态 class 列表中，不能拆到 hover 或 JS 切换的类里；而自定义 keyframes 的合法性，Tailwind 从不报错，只静默跳过——建议每次改完 config，跑一次 npx tailwindcss -o ./dist/tailwind.css --minify 并搜索生成文件确认规则是否真的存在。
