CSS transition 失效主因是 property、duration、timing-function、delay 四属性协作不当：property 误用 all 或含不支持属性；duration 缺失或为 0；timing-function 不匹配交互场景；未在初始态声明 transition 或状态值不可计算。
初学者用 CSS transition 时，常因忽略细节导致效果“没反应”“跳变”或“只动一次”。核心问题不在语法写错，而在对四个关键属性（property、duration、timing-function、delay）的协作逻辑理解不深。下面说几个高频踩坑点和对应解法。
过渡属性（property）写成“all”却没触发变化
很多人直接写 transition: all 0.3s;，以为“所有属性都会平滑变化”，但实际只有当某个 CSS 属性值真正被修改（比如通过 hover、JS 修改 class 或内联样式），且该属性本身支持过渡（如 color、opacity、transform、width 等），才会生效。像 display、height（从 0 到 auto）、font-size（部分旧浏览器）等要么不支持过渡，要么需要明确起止值。
- ✅ 推荐：明确指定要过渡的属性，例如
transition: opacity 0.3s, transform 0.3s; - ✅ 如果要用
all，确保触发的变化是支持过渡的属性，且有明确数值（避免height: auto→height: 200px这类无效过渡） - ❌ 避免：对
display: none ↔ block加 transition——它不会渐变，只会瞬间切换
过渡时间（duration）设为 0 或遗漏，导致“无动画”
transition-duration 是必填项（除非设为 0），但初学者常忘记写，或误以为默认有延迟。CSS 中若只写 transition: opacity;，等于 transition: opacity 0s ease 0s;——即零秒完成，肉眼看不到过渡。
- ✅ 必须显式写时间，单位不能省：如
0.3s或300ms - ✅ 时间太短（如
0.05s）或太长（如5s）都影响体验，建议常用范围是0.2s–0.4s - ❌ 不要依赖“浏览器默认值”——CSS transition 没有默认 duration
计时函数（timing-function）用错，动画僵硬或反直觉
ease（默认值）看起来柔和，但实际是先慢后快再慢，适合入口动画；而 linear 匀速运动常显得机械；ease-in-out 更平衡。初学者常忽略 timing-function 对感知流畅度的影响。
立即学习“前端免费学习笔记（深入）”；
- ✅ 交互反馈类（如按钮 hover）推荐
ease-out或cubic-bezier(0.25, 0.46, 0.45, 0.94)（类似 Material Design 的标准缓动） - ✅ 用 easings.net 可视化对比不同函数，选符合行为直觉的曲线
- ❌ 避免全站统一用
ease-in（慢启动），容易让人感觉“卡顿”或响应迟钝
过渡未在正确时机触发：缺少初始状态或伪类不匹配
transition 要生效，元素必须存在“初始态”和“目标态”的差异。例如只在 :hover 里写 transition 和变化样式，但正常态没定义对应属性，就可能无法回退过渡；或者用 JS 切换 class，但 class 名拼错、选择器权重不够，也会失效。
- ✅ 把
transition写在默认状态（非 hover / active），让进出都有动画 - ✅ 确保两个状态中，被过渡的属性都有明确可计算的值（比如都用 px、%、em，别混用）
- ✅ 用浏览器开发者工具检查“Computed”面板，确认 transition 相关属性是否被成功应用，以及“Styles”里是否有覆盖规则
transition 不复杂，但容易忽略状态逻辑和属性兼容性。把 property、duration、timing-function 当作一个协作小组来配，而不是孤立设置，就能避开大多数“为什么动不了”的困惑。
