transition必须定义在元素默认状态而非伪类中，否则离开时无过渡；需检查是否被覆盖、属性是否支持动画（如避免display）、触发条件是否满足。
过渡效果失效或触发异常，通常是因为 transition 没有写在元素的默认（非伪类）状态中，而是只写在 :hover、:focus 等伪类里。CSS 过渡必须定义在“起始状态”，浏览器才能知道从什么属性值开始平滑变化。
transition 必须放在基础选择器上
错误写法：过渡只出现在伪类中，会导致进入时有动画，但离开时立刻跳变（无过渡）。
❌ 错误示例：
.btn {
background: #007bff;
}
.btn:hover {
background: #0056b3;
transition: background 0.3s ease; /* ❌ 这里加无效 */
}✅ 正确写法：把 transition 放在默认状态，确保进出都有过渡。
立即学习“前端免费学习笔记（深入）”；
.btn {
background: #007bff;
transition: background 0.3s ease; /* ✅ 正确：定义在常态 */
}
.btn:hover {
background: #0056b3;
}检查是否被其他样式覆盖或重置
某些 CSS 框架或重置样式可能在伪类中意外设置了 transition: none 或覆盖了过渡属性。
- 用浏览器开发者工具检查 hover 状态下
transition是否被划掉（表示被覆盖） - 确认没有在
:hover中重复声明transition且值为none或不完整 - 避免使用简写
transition: all 0.3s，它可能意外覆盖其他过渡；建议明确写出要过渡的属性
注意触发属性是否支持过渡
不是所有 CSS 属性都能过渡。例如 display、height（从 0 到 auto）、font-size（当值为 small/large 等关键字时）等可能表现异常。
- 优先使用数值型可动画属性：如
opacity、transform、background-color、margin、padding - 想过渡高度？改用
max-height配合足够大的固定值（如max-height: 500px），并确保起始/结束值都是具体数字 - 需要隐藏显示又带过渡？用
opacity + visibility组合，而非display
确保伪类确实被触发且无阻止行为
有时看似没反应，其实是交互条件未满足：
- 检查元素是否可聚焦（
tabindex缺失导致:focus不生效） - 确认鼠标悬停区域正确（父容器
overflow: hidden或pointer-events: none可能拦截事件） - 移动端需注意
:hover在触摸设备上兼容性差，建议搭配:active或 JS 添加 class 控制
