css动画如何在悬停时触发_css动画交互触发方式说明_技术教程

悬停动画必须用 :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 等触发布局重排的属性，容易掉帧