forwards使动画结束后保留最后一帧样式，backwards在动画开始前（尤其有延迟时）应用第一帧样式，两者分别控制动画尾部和头部的样式填充。
在 CSS 动画中，animation-fill-mode 用于控制动画在执行前后的样式表现。其中 forwards 和 backwards 是两个常用值，它们的作用时机和影响对象不同，容易混淆。下面详细说明两者的区别。
animation-fill-mode: forwards
这个值决定动画结束后，元素是否保留最后一帧的样式。
说明：- 当动画播放到最后一个关键帧（即 100% 或 to）时，元素的样式会“冻结”在那一帧。
- 即使动画结束，元素也不会恢复到原始状态（除非被其他样式覆盖）。
- 适用于希望动画效果“停留”的场景，比如让元素淡出后保持隐藏。
例子：
@keyframes fadeOut {
from { opacity: 1; }
to { opacity: 0; }
}
.element {
animation: fadeOut 2s forwards;
}
动画结束后，.element 的 opacity 会保持为 0。
立即学习“前端免费学习笔记（深入）”；
animation-fill-mode: backwards
这个值影响的是动画开始前的状态，具体是指从何时开始应用动画的第一帧样式。
说明：- 如果设置了
animation-delay，在延迟期间，浏览器默认不会应用任何动画样式。 - 加上
backwards后，在延迟阶段就会应用动画第一帧（即 0% 或 from）的样式。 - 如果没有设置 delay，则效果通常不明显。
例子：
@keyframes slideIn {
from { transform: translateX(-100px); }
to { transform: translateX(0); }
}
.element {
animation: slideIn 2s 1s backwards;
}
虽然动画 1 秒后才开始，但在这 1 秒的延迟期内，元素已经处于 translateX(-100px) 的位置，而不是原始位置。
对比总结
- forwards：关注动画“结束后”的状态，保留最后一帧。
- backwards：关注动画“开始前”的状态，提前应用第一帧（尤其在有 delay 时生效）。
- 两者可以同时使用：
animation-fill-mode: both;表示兼顾前后。
基本上就这些。理解的关键是：forwards 看结尾，backwards 看开头。
