用:hover触发@keyframes动画需在:hover中声明animation属性，定义同名@keyframes规则；移出后卡在末帧因animation-fill-mode默认none，应在非hover状态设animation:none或配合forwards控制结束态。
如何用 :hover 触发 @keyframes 动画
直接给元素加 :hover，并在其中声明 animation 属性即可。css 动画本身不依赖 javaScript，:hover 是最轻量、最常用的触发方式。
- 必须定义
@keyframes规则（命名要和animation-name一致） -
:hover块内只需写animation: xxx;，无需额外 js 绑定 - 动画默认不会“反向播放”回初始状态，离开时元素会卡在最后一帧 —— 这是常见困惑点，后面会说明怎么解决
为什么鼠标移开后动画不还原？
因为 animation-fill-mode 默认是 none，但 :hover 状态消失后，样式退回到非 hover 的原始值；如果原始值里没写 animation，那自然就停了 —— 可问题常出在「你忘了重置动画属性」或「没设回退的关键帧」。
- 想让元素移开后自动恢复原状，得在非
:hover状态显式写animation: none;或animation: initial; - 更稳妥的做法：用
animation-fill-mode: forwards;配合animation-direction: normal;控制结束态，再配合:hover外的规则清空动画 - 如果希望进出都有动画（比如缩放+淡入/淡出），就得用两套
@keyframes，或用animation-direction: reverse;+animation-play-state: paused;模拟，但复杂度陡增
animation 属性哪些值该写在 :hover 里？
只写「变化的部分」。通常只需要 animation-name、animation-duration 和 animation-timing-function；其他如 animation-fill-mode 或 animation-iteration-count 若和默认值不同，也建议明确写出，避免继承干扰。
- 别在
:hover里重复写animation-delay，除非真需要悬停后延迟启动 -
animation-play-state一般不用设，除非你要做暂停/恢复控制 - 注意单位：
duration必须带s或ms，漏掉会整个animation声明失效 - 简写形式如
animation: slide-in 0.3s ease-out;最常用，但要清楚它会覆盖所有子属性（包括你可能在外部设过的animation-fill-mode）
兼容性与性能要注意什么？
@keyframes + :hover 在现代浏览器中完全没问题，但老版本 safari（transform 动画的硬件加速支持不稳定，IE 则根本不支持 @keyframes。
立即学习“前端免费学习笔记（深入）”；
- 优先用
transform和opacity做动画，它们能走合成层，不触发布局重排 - 避免在
:hover中动画height、width、margin等触发 layout 的属性 - 移动端没有
:hover（除部分 iOS Safari 模拟外），所以纯靠悬停的交互在手机上基本无效 —— 如果需兼顾，得加点击态或用 JS 补充touchstart - 多个元素同时悬停触发动画时，注意 GPU 内存占用，尤其在低端安卓机上容易掉帧
实际效果是否平滑，往往不在 keyframes 写得多炫，而在于你有没有避开 layout、有没有正确重置非 hover 状态、以及有没有意识到 hover 在移动设备上根本不存在。