css 动画执行一次后就消失怎么办_利用 animation fill mode 保持状态

animation-fill-mode: forwards 可使动画结束后保持最后一帧样式，但需配合 animation-iteration-count: 1 才实现“执行一次后停住”；若 transform 等属性未在 keyframes 最后一帧显式声明，则仍会丢失。

animation-fill-mode: forwards 能让动画结束后保持最后一帧

css 动画默认执行完就回退到初始状态，看起来像“消失了”。根本原因不是动画没生效，而是动画结束后的元素样式被重置为 animation 作用前的值。解决方法是用 animation-fill-mode 控制动画前后应用的样式。

最常用且有效的取值是 forwards：动画结束后，元素保留 @keyframes 中最后一帧声明的样式。

• animation-fill-mode: none（默认）：动画不改变首尾帧外的样式
• animation-fill-mode: forwards：保留最后一帧的属性值，视觉上“停住”
• animation-fill-mode: backwards：动画开始前就应用第一帧（需配合 animation-delay 才明显）
• animation-fill-mode: both：等价于 forwards + backwards

必须同时设置 animation-iteration-count: 1 才能真正“执行一次”

只加 forwards 不够——如果 animation-iteration-count 是默认的 1 倒没问题；但一旦写成 infinite 或其他值，forwards 依然生效，只是每次循环结束都“停在最后一帧”，实际效果可能不符合预期。

确保行为符合“执行一次后保持”这个目标，两个条件缺一不可：

立即学习“前端免费学习笔记（深入）”；

• animation-iteration-count: 1（显式写出更安全，避免继承或重置干扰）
• animation-fill-mode: forwards

漏掉前者，动画会反复播放；漏掉后者，即使只播一次，也会闪回原始状态。

常见错误：transform 动画中 translate/rotate/scale 没生效

很多用户发现加了 forwards，transform 属性还是没留住。典型原因是：动画里写的 transform: translateX(100px)，但元素原本有 transform: scale(0.9) ——CSS transform 不会自动合并，动画结束时只保留 keyframes 里声明的 transform 值，其他 transform 被覆盖为 none。

正确做法是，在 @keyframes 的最后一帧中，把所有需要保留的 transform 值都写全：

@keyframes slideIn {   from {     opacity: 0;     transform: translateX(-20px) scale(0.95);   }   to {     opacity: 1;     transform: translateX(0) scale(0.95); /* 显式保留 scale */   } }

否则浏览器无法推断你“想保留 scale”，只会按 keyframes 中定义的值渲染。

兼容性与替代方案：IE10+ 支持，但不要依赖 js 控制 class 切换

animation-fill-mode 在 IE10+、edge、chrome、firefox、safari 均支持，移动端 ios Safari 9.3+ 也 OK。唯一要注意的是旧版 android Browser（4.3 及以下）不支持，但已基本可忽略。

有人用 JS 监听 animationend 事件再手动加 class 保存状态，这反而引入竞态和冗余逻辑。只要 CSS 写对，没必要 JS 干预：

.box {   animation: slideIn 0.3s ease-out;   animation-fill-mode: forwards;   animation-iteration-count: 1; }

真正容易被忽略的点是：动画属性（如 opacity、transform）必须在 keyframes 里明确写出终值；否则 forwards 什么也留不住。