transition必须写在非hover状态的规则里，否则移出时因缺少过渡声明而瞬间跳变；仅可计算中间值的属性（如color、transform）支持过渡，display、auto宽高、position、z-index等不支持；移动端:hover不可靠，应改用:active或JS控制class切换。
transition必须写在非hover状态的规则里
很多人把transition只写在:hover里，结果鼠标移入有动画、移出却瞬间跳变。这是因为transition需要作用于“属性变化的起始和结束两个状态”，而移出时若原元素没定义transition，浏览器就默认用transition: none，自然不触发过渡。
正确做法是把transition声明放在基础选择器（比如.btn）中，而不是只放在.btn:hover里：
.btn {
background-color: #007bff;
transition: background-color 0.3s ease, transform 0.2s ease;
}
.btn:hover {
background-color: #0056b3;
transform: translateY(-2px);
}
哪些CSS属性能被transition平滑过渡
不是所有CSS属性都支持过渡。只有具有“可计算中间值”的属性才行，比如color、opacity、transform、width（需有明确数值）、font-size等。但以下这些常见属性无法过渡：
-
display（none↔block无中间态） -
height或width设为auto时（浏览器无法插值） -
position（static↔relative不可插值） -
z-index（离散整数，无中间值）
如果想让高度展开有过渡效果，得用max-height代替height，并设一个足够大的固定值（如max-height: 500px），再配合overflow: hidden。
立即学习“前端免费学习笔记（深入）”；
hover触发过渡时常见的“闪动”或“失效”原因
鼠标快速进出时，过渡中途被新状态打断，容易出现卡顿、反向错乱甚至直接跳变。主要原因有：
- 多个
transition写法混用：比如同时写了transition: all 0.3s和具体属性过渡，导致冲突 - 未重置过渡属性：hover结束后，某些属性（如
transform）没在基础样式里设初始值，造成状态不一致 - 使用了
will-change: transform但未合理控制生命周期，引发渲染异常 - 父容器有
overflow: hidden且子元素transform超出边界，部分浏览器会丢弃过渡帧
建议始终显式声明要过渡的属性名，避免用all；hover结束后的样式必须完整覆盖，不要依赖“隐式回退”。
移动端hover伪类其实不可靠
在iOS Safari、Android Chrome等主流移动浏览器中，:hover仅在模拟桌面模式或极少数场景下生效，真实触摸操作不会触发。所以依赖:hover + transition做的交互，在手机上大概率静默失效。
如果需要跨端一致的过渡反馈，应改用:active（点击瞬间）或结合JavaScript监听touchstart/touchend来切换class：
.card {
transform: scale(1);
transition: transform 0.2s ease;
}
.card.active, .card:hover {
transform: scale(0.98);
}
真正可靠的方案，永远是把过渡逻辑和触发时机解耦——CSS管“怎么变”，JS管“什么时候变”。
