CSS动画结束保留最终状态方法

珍惜时间，勤奋学习！今天给大家带来《CSS动画结束后保留最终状态》，正文内容主要涉及到等等，如果你正在学习文章，或者是对文章有疑问，欢迎大家关注我！后面我会持续更新相关内容的，希望都能帮到正在学习的大家！

animation-fill-mode: forwards 只在动画播放完成时生效，需配合 animation-duration 等明确结束时间的属性；若使用 infinite、缺末帧或被简写覆盖则无效。

animation-fill-mode: forwards 为什么没生效

直接加 animation-fill-mode: forwards 却发现动画结束还是跳回初始状态，大概率是漏了关键前提：这个属性只对「已播放完成的动画」起作用，而默认情况下，CSS 动画在结束时会重置元素样式（除非显式保留）。

• 必须配合 animation-duration 或 animation-delay 等让动画有明确的“结束时间点”，否则浏览器无法判断何时该应用 forwards
• 如果用了 animation-iteration-count: infinite，forwards 完全无效——因为动画永不停止
• 若动画本身没定义末帧（比如 @keyframes 只写了 0% 没写 100%），浏览器可能 fallback 到初始值，forwards 也就无从保留

正确写法：必须同时声明 duration 和 forwards

单独写 animation-fill-mode: forwards 是不够的，它只是“策略”，真正触发保留行为的是动画执行完毕这一事实。所以至少要配一个可终止的动画时长。

button {
  animation: slideIn 0.3s ease-out;
  animation-fill-mode: forwards;
}
@keyframes slideIn {
  from { transform: translateX(-20px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

注意：animation 简写属性里不包含 animation-fill-mode，所以必须单独写；如果用简写覆盖了整个动画声明（比如后面又写了一次 animation: ...），animation-fill-mode 会被重置为默认值 none。

和 visibility / display 冲突时的常见坑

很多人想“动画完隐藏元素但保留最终位置”，于是加 visibility: hidden 或 display: none 到末帧，这会导致 forwards 失效或表现异常。

• visibility: hidden 在末帧中是有效的，元素仍占位，forwards 能保留该状态
• display: none 在末帧中虽能写入，但浏览器通常不会真正应用它——因为 display 是非过渡属性，且 forwards 不保证强制渲染该值；更稳妥的做法是动画结束后用 JS 设置 display: none
• 如果动画过程中父容器设置了 overflow: hidden，而末帧位置超出可视区，看起来像“消失了”，其实只是被裁剪了

替代方案：transition + class 切换更可控

当动画逻辑变复杂（比如需要 JS 控制时机、多状态切换、或兼容老版本 Safari），纯 CSS animation + forwards 容易失控。这时候用 transition 配合类名增删反而更稳。

.box {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s, transform 0.3s;
}
.box.active {
  opacity: 1;
  transform: translateY(0);
}

JS 触发：element.classList.add('active')。这种方式天然“保留在最终状态”，没有 forwards 的语义边界问题，也更容易调试和中断。

真正容易被忽略的是：CSS 动画的“完成”依赖于时间轴和迭代次数，而不是视觉结果；哪怕你肉眼看到动完了，只要浏览器内部还没走到 timeline 终点（比如被 JS 中断、或硬件加速未就绪），forwards 就不会生效。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~