悬停动画必须用 :hover 触发但需配合 transition 才生效，:hover 仅切换样式状态；transition 必须写在常态规则中，优先使用 transform 和 opacity；伪元素下划线需结合 position 和 width 过渡实现。
悬停动画必须用 :hover 触发，但仅靠它不够
纯 CSS 动画在悬停时生效，核心依赖 :hover 伪类——它不是“启动动画”的命令，而是“切换样式状态”的开关。浏览器只会在你定义了可过渡的属性 + 合理的 transition 时，才渲染出动画效果。
-
:hover本身不产生动画，它只是告诉浏览器：“现在该用另一套样式了” - 没有
transition，所有样式变化都是瞬时的（比如背景色突变、元素跳动） - 动画是否平滑，取决于你选的属性是否支持过渡：比如
width可以过渡，但display不行；transform和opacity是最安全、性能最好的选择 - 移动端要注意：
:hover在 iOS Safari 和多数 Android WebView 中不可靠，首次点击后即失效，不能用于关键交互
transition 必须写在常态规则里，而不是 :hover 中
很多人把 transition 写在 :hover 块里，结果鼠标移出时动画消失——这是因为移出后样式恢复，但没定义“如何恢复”，浏览器直接硬切。正确做法是把 transition 放在常态选择器中，确保进出都有缓动。
.button {
background: #4cc9f0;
transform: scale(1);
transition: background 0.3s ease, transform 0.3s ease;
}
.button:hover {
background: #f038ff;
transform: scale(1.05);
}
- 写在常态中，等于告诉浏览器：“所有这些属性的变化，都按这个节奏过渡”
- 避免用
transition: all，它会意外过渡你不希望动的属性（比如height从auto变化就会失败） - 多个属性过渡时，用逗号分隔，可分别指定时长和缓动函数，例如
transition: opacity 0.2s ease-in, transform 0.3s cubic-bezier(0.17, 0.67, 0.83, 0.67)
伪元素动画（如下划线）要靠定位 + ::after + width 过渡
常见需求是文字下方出现渐显下划线，这不能靠 text-decoration 实现，因为它的样式无法单独过渡。标准解法是用 ::after 创建一个绝对定位的条，控制其宽度变化。
.link {
position: relative;
color: #333;
text-decoration: none;
}
.link::after {
content: '';
position: absolute;
left: 0;
bottom: -2px;
width: 0;
height: 2px;
background: #007bff;
transition: width 0.3s ease;
}
.link:hover::after {
width: 100%;
}
-
position: relative是必须的，否则::after无法相对于文字精确定位 - 初始
width: 0，hover 时设为100%，过渡才生效；若用opacity控制显隐，会丢失“从左到右展开”的方向感 - 不要给
::after设display: none—— 它不支持过渡，且会导致布局塌陷
复杂动画慎用 @keyframes + :hover，优先走 transform + transition
想实现旋转+缩放+位移组合？别急着写 @keyframes。CSS 动画（animation）在悬停触发时存在天然缺陷：每次 hover 都是重新播放，无法自然“进/出”，且难以控制反向。
-
transform+transition天然支持双向过渡：鼠标进入时正向动，离开时自动逆向还原 -
animation需配合animation-fill-mode: forwards才能保持结束态，但移出时无法自动倒播，得额外写:hover外的还原规则，极易错乱 - 真要用
@keyframes（比如脉冲闪烁），务必加animation-play-state: paused到常态，并在:hover中设为running，否则动画会一加载就跑 - 性能上，
transform和opacity走合成层，animation若含left/top/width等触发布局重排的属性，容易掉帧
真正卡住人的，往往不是“怎么写动画”，而是“为什么移出时不还原”“为什么移动端没反应”“为什么下划线偏移了”。这些问题背后，几乎都指向三个点：transition 没写对位置、伪元素缺 position 上下文、或误以为 :hover 是万能触发器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
