17370845950

悬停动画必须用 :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 是万能触发器。