animation-fill-mode用于控制动画前后元素样式表现，其默认值为none，动画结束后元素会恢复原始样式；设置forwards可使元素保留动画最后一帧样式，避免跳回初始状态；backwards则让元素在动画开始前应用第一帧样式，常配合animation-delay使用；both结合两者效果。例如，fadeout动画中使用forwards能让元素淡出后保持隐藏；slidein动画中使用backwards可在延迟期间提前显示起始位置，提升视觉连贯性。合理使用该属性可让动画过渡更自然。
CSS 的 animation-fill-mode 属性用于控制动画执行前后，元素的样式表现。特别是当动画未运行（如动画开始前或结束后），这个属性决定了元素是否应用动画关键帧中的样式，从而避免样式“跳回”初始状态的问题。
animation-fill-mode 的作用
默认情况下，CSS 动画只在执行过程中影响元素样式。一旦动画结束，元素会立即恢复到原始样式（即非动画状态）。通过设置 animation-fill-mode，可以让元素保留动画最后一帧的样式，或者在动画开始前就应用第一帧的样式。
可用值及其效果
- none：默认值。动画在执行前后不应用任何样式。元素在动画结束后立刻回到原始状态。
- forwards：动画结束后，元素保留最后一帧（即 100% 或 to 关键帧）的样式，不会恢复原状。
-
backwards：动画开始前，元素应用第一帧（即 0% 或 from 关键帧）的样式。但只在动画延迟期间生效，常配合
animation-delay使用。 - both：结合 forwards 和 backwards 的效果。动画开始前使用首帧样式，结束后保留末帧样式。
实际应用场景
假设你想让一个元素淡出后保持隐藏状态：
@keyframes fadeOut {
to { opacity: 0; }
}
.element {
animation: fadeOut 2s ease-in-out;
animation-fill-mode: forwards;
}
这里设置 forwards 后，元素在动画结束后仍保持 opacity: 0，而不是闪回原来的不透明状态。
若希望元素在延迟期间就进入准备状态（比如提前移动到起始位置），可使用：
.element {
animation: slideIn 1s ease-out 2s;
animation-fill-mode: backwards;
}
这样在 2 秒延迟期间，元素就会显示为动画第一帧的位置，提升视觉连贯性。
基本上就这些。合理使用 animation-fill-mode 能有效控制动画的“前后状态”，让过渡更自然。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
