transition必须写在基础选择器中而非:hover等伪类里，否则移出时无过渡；仅transform、opacity等可交由合成层处理的属性适合过渡，display等不可插值属性完全不支持。
transition 必须写在基础选择器里，否则只进不出、移开就跳变——这不是 bug，是 CSS 渲染规则本身决定的。
为什么:hover里写transition没用
浏览器判断过渡是否生效，看的是「起始状态」有没有声明 transition。如果只在 :hover 里写 transition: background-color 0.3s;，那鼠标移出时，元素回到默认状态，而默认状态没声明过渡，浏览器直接硬切，没有缓动过程。
- 错误写法：
.btn:hover { background-color: #0056b3; transition: background-color 0.3s; } - 正确写法：
.btn { background-color: #007bff; transition: background-color 0.3s ease; }+.btn:hover { background-color: #0056b3; } - 哪怕只是想让悬停“进”得平滑，也得把
transition放在基础规则里，否则移出瞬间必跳
哪些属性适合做过渡，哪些会卡顿
不是所有 CSS 属性都能平滑过渡，关键看是否触发重排（layout）或重绘（paint）代价高。
- 推荐用：
transform、opacity、background-color—— 浏览器可交由合成层处理，性能好 - 慎用：
height、margin、padding、left/top—— 触发重排，滚动或高频悬停时明显卡顿 - 完全不能过渡：
display、z-index、font-size（部分旧浏览器不支持）
:active伪类为啥点下去没动画
因为 :active 是瞬时状态：鼠标按下即触发，松开即消失，浏览器根本来不及播放过渡动画。
- 只靠
button:active { transform: scale(0.95); transition: transform 0.2s; }基本无效 - 真实可用方案是 JS 控制 class：
button.addEventListener('click', () => btn.classList.add('pressed'))，再把transition写在.button基础规则里 - 如果必须纯 CSS，可配合
:focus-within或input:checked模拟持久态
transition写法细节容易踩坑
看似简单，但参数顺序、值类型、单位缺失都会导致失效。
-
transition必须带时间单位，0.3s可以，0.3不行 - 多个属性过渡要写全：
transition: background-color 0.3s, transform 0.2s;，漏掉逗号或空格会整个失效 - 用
all要小心：transition: all 0.3s;可能意外过渡到你不希望变的属性（比如box-shadow的模糊半径） - 想禁用某个状态的过渡？别删
transition，改用transition: none;更可靠
最常被忽略的一点：transition 生效的前提是「两个状态的值都可计算且有中间态」。比如从 visibility: hidden 到 visible 就不行，但 opacity: 0 到 1 可以——这决定了你到底是做视觉切换，还是真要控制显示/隐藏逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
