animation-fill-mode用于控制动画外元素样式状态，其forwards值可使动画结束后保留最终关键帧样式，避免元素“弹回”初始状态。
CSS 中的 animation-fill-mode 属性用于控制动画执行之外的时间内，元素应用的样式状态。它决定了动画在开始前、结束后或整个不播放期间是否保留关键帧中的样式。这个属性对于让动画结束后的元素“停留在”最终状态非常有用。
animation-fill-mode 的取值及作用
该属性有四个常用值，每个值定义了不同的样式应用行为：
- none：默认值。动画在执行时生效，但在动画开始前和结束后不会影响元素的样式，元素会恢复到原始样式。
- forwards：动画结束后，元素将保留最后一个关键帧（即 100% 或 to）中定义的样式，不会恢复初始状态。
- backwards：动画开始前，元素应用第一个关键帧（即 0% 或 from）的样式，但仅在 animation-delay 期间有效。
- both：结合 forwards 和 backwards 的行为，动画既在开始前应用起始样式，又在结束后保留最终样式。
如何让动画结束后保持最终状态
最常见的需求是：动画执行完后，元素不要“弹回”原来的样子。这时应使用 forwards。
.element {
animation-name: slideIn;
animation-duration: 2s;
animation-fill-mode: forwards;
}
@keyframes slideIn {
from {
transform: translateX(-100px);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
在这个例子中，元素从左侧滑入并淡入。由于设置了 animation-fill-mode: forwards，动画结束后，元素会保持在 transform: translateX(0); opacity: 1; 的状态。
立即学习“前端免费学习笔记（深入）”；
实际应用建议
- 如果希望动画结束后“定格”在最后一帧，务必设置 animation-fill-mode: forwards。
- 当动画有延迟（animation-delay）且希望在延迟期间就显示起始样式，可使用 backwards 或 both。
- 多个动画叠加时，fill-mode 的行为可能复杂，建议逐个测试确保符合预期。
- 与 animation-iteration-count 配合使用时注意：forwards 保留的是最后一次迭代的关键帧，无论重复多少次。
