关键帧动画鼠标移入触发一次并停在最后一帧，需设animation-iteration-count: 1和animation-fill-mode: forwards，并将动画声明置于:hover中。
关键帧动画在鼠标移入时触发一次并停在最后一帧，核心是两步：**不循环 + 保持终态**。纯 CSS 就能实现，无需 JavaScript。
1. 确保动画只执行一次
用 animation-iteration-count: 1 明确限定播放次数。即使不写，默认也是 1 次，但显式声明更可靠，避免被其他样式覆盖。
- ✅ 正确：
animation-iteration-count: 1; - ❌ 错误：
animation-iteration-count: infinite;或完全不设（虽默认为 1，但易受干扰）
2. 让元素停在动画结束位置
仅设播放一次还不够——动画一结束，元素会“弹回”初始样式。必须配合 animation-fill-mode: forwards，告诉浏览器：动画结束后，保留最后一帧的全部样式值。
- ✅ 正确：
animation-fill-mode: forwards; - ⚠️ 注意：
forwards不影响动画开始前的状态；若还需保留起始帧，可用both，但本场景只需forwards
3. 用 :hover 触发，且不依赖悬停持续时间
把动画声明写在 :hover 伪类里，这样鼠标移入才启动。由于已设 iteration-count: 1 和 fill-mode: forwards，动画播完就静止，哪怕鼠标还悬停着也不会重复。
立即学习“前端免费学习笔记（深入）”；
示例代码：
.box {
width: 100px;
height: 100px;
background: #3498db;
}
.box:hover {
animation: slideIn 0.6s ease-out 1 forwards;
}
@keyframes slideIn {
from { transform: translateX(-100px); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
移入即播放一次，完成后稳稳停在 translateX(0) 和 opacity: 1 状态，不闪、不跳、不重播。
4. 避免常见干扰
如果动画没停住或反复触发，检查以下几点：
- 是否误写了
infinite或遗漏forwards - 是否在其他地方（比如父容器或全局重置）设置了
animation: none或覆盖了该元素的动画属性 - 是否用了
transition混合控制——transition和@keyframes行为不同，别混用同一组属性
