CSS过渡失效通常因属性不可动画、触发条件未满足或兼容性问题，需检查属性支持性（如transform/opacity可过渡，display/height:auto不可）、确保样式变化可计算、补全厂商前缀及transition完整语法。
CSS 过渡（transition）在部分浏览器中失效，通常不是“完全不支持”，而是因属性不被过渡、触发条件未满足或浏览器兼容性细节导致。需分步排查，重点确认目标属性是否可动画、是否正确触发、以及是否遗漏厂商前缀或语法错误。
确认目标 CSS 属性是否支持过渡
并非所有 CSS 属性都支持 transition。例如 display、visibility、height（当值为 auto 时）、position（本身不可过渡，但 top/left 等偏移量可以）等，要么不可动画，要么有严格限制。
- ✅ 支持过渡的常见属性：
color、background-color、opacity、transform、width、height（固定值如100px）、font-size - ❌ 不支持或效果异常的属性：
display（切换none⇄block会跳变）、height: auto（无法计算起止值）、margin/padding从auto变化、z-index - ? 建议：优先用
transform和opacity实现位移/缩放/淡入淡出——它们性能好、兼容性强、且始终可过渡
检查过渡是否被正确触发
过渡只在**可计算的样式变化**时生效，常见“看似写了 transition 却没动”的原因：
- 初始状态和结束状态相同（如
opacity: 1→opacity: 1），无变化则无过渡 - 样式变更未脱离文档流或未触发重绘（例如仅修改
class但新 class 未真正改变目标属性） - 使用了 JavaScript 动态设置样式，但把
transition和属性变更写在同一次重排中（浏览器会合并，跳过过渡） - ✅ 正确做法：先添加 class（含
transition），再用offsetHeight或setTimeout强制重排，最后设置终态属性
验证浏览器兼容性与语法规范
现代浏览器（Chrome 26+、Firefox 16+、Safari 6.1+、Edge 12+）均原生支持 transition，但仍有细节需注意：
立即学习“前端免费学习笔记（深入）”；
- 旧版 Safari（≤6）和 Android Browser（≤4.3）需加
-webkit-前缀：-webkit-transition -
transition是简写属性，若漏写时间或时序函数（如只写transition: opacity;），将使用默认值0s ease 0s，导致“瞬间完成”——看起来像没过渡 - 确保写法完整，例如：
transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); - 可使用 caniuse.com/css-transitions 查对应浏览器支持情况
调试建议：快速定位问题
- 打开开发者工具 → 检查元素 → 在 “Styles” 面板确认目标元素是否应用了
transition规则，且无 strike-through（被覆盖） - 手动在控制台执行
getComputedStyle(el).transition，看返回值是否符合预期 - 临时改用
opacity或transform: translateY()测试——若这两个能动，说明环境正常，问题出在原属性本身 - 在不同浏览器（尤其 Safari、旧版 Edge）中单独测试，排除渲染引擎差异
