CSS 关键帧动画怎么在鼠标移入时触发一次并停止-H5教程-PHP中文网

关键帧动画鼠标移入触发一次并停在最后一帧，需设animation-iteration-count: 1和animation-fill-mode: forwards，并将动画声明置于:hover中。

css 关键帧动画怎么在鼠标移入时触发一次并停止

关键帧动画在鼠标移入时触发一次并停在最后一帧，核心是两步：**不循环 + 保持终态**。纯 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，动画播完就静止，哪怕鼠标还悬停着也不会重复。

CSS

CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。

下载

示例代码：

.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 状态，不闪、不跳、不重播。