transition必须写在按钮默认样式中，而非仅:hover里；应使用background-color等可gpu加速属性；多属性过渡需补全简写参数；:active因持续时间短易导致动画失效，需js配合class控制。
transition 必须写在按钮基础样式里，不能只放 :hover 中
很多人写了 button:hover { background: #0056b3; transition: background 0.3s ease; }，结果悬停时颜色还是“啪”一下变过去。这是因为 transition 只在 :hover 规则里声明，起始状态（默认样式）没匹配该声明，浏览器无法计算过渡起点。
正确做法是把 transition 放在按钮的默认规则中：
button {
background: #007bff;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #0056b3;
}
-
transition必须同时覆盖起始态和结束态，否则不触发动画 - 推荐明确写
background-color而非all，避免意外过渡其他不可控属性 - 移动端 Safari 对 :hover 支持弱，记得加
cursor: pointer提升识别率
哪些 CSS 属性适合用 transition 做悬停动画
不是所有属性都适合过渡——有些会触发布局重排（reflow），导致卡顿；有些能走 GPU 加速，丝滑流畅。
- ✅ 推荐：
background-color、color、opacity、transform（如scale、translateY）——这些是合成层动画，性能好 - ❌ 避免：
width、height、left、top、margin、padding——改这些会强制重排+重绘，尤其在低端设备上明显掉帧 - ? 小技巧：想模拟“浮起”效果，用
transform: translateY(-3px)+box-shadow，别用top: -3px
多个属性同时过渡怎么写才不踩坑
transition 简写支持多个属性，但顺序和逗号分隔容易出错。
错误写法：transition: background-color 0.3s, transform 0.2s ease-in; —— 第二个属性缺了 delay 位，浏览器可能忽略整个声明。
安全写法有两种：
- 分开写（最稳妥）：
transition-property: background-color, transform;+transition-duration: 0.3s, 0.2s;+transition-timing-function: ease, ease-in; - 简写并补全（推荐）：
transition: background-color 0.3s ease, transform 0.2s ease-in 0s;—— 每组都带齐四个参数，0s表示无延迟
注意：transition 的值顺序严格对应：property → duration → timing-function → delay。省略中间项时，后续值会自动左移，极易误判。
:active 状态下 transition 为什么经常失效
纯 CSS 的 :active 伪类在点击松开瞬间就消失，状态持续时间通常不到 100ms，远短于你设的 0.3s 过渡时长，所以根本播不完就跳回去了。
- 这不是写错了，是浏览器行为限制——
:active本就不是为“持续反馈”设计的 - 需要点击后保持动画效果？必须用 JS 控制 class：
btn.classList.add('clicked')，再配合setTimeout或transitionend事件移除 - 千万别在 click 回调里立刻
removeclass，否则动画会被硬中断
真正容易被忽略的是：悬停动画看着简单，但一旦涉及多属性协同、移动端兼容、或从 hover 切换到 active 的衔接，就得靠显式 class + JS 才能稳住节奏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
