CSS动画fill-modeforwards与backwards区别详解

前往漫画官网入口并下载

CSS动画中的`animation-fill-mode`属性用于控制动画在执行前后的样式状态，其中`forwards`和`backwards`是两个关键值，它们分别作用于动画的尾部和头部。本文深入解析`forwards`与`backwards`的区别，`forwards`使动画结束后元素保持最后一帧的样式，实现动画效果的“停留”；而`backwards`则在动画开始前（尤其在有`animation-delay`时）提前应用第一帧的样式。理解这两个值的关键在于：`forwards`关注动画的“结尾”，`backwards`关注动画的“开头”。两者可以结合使用`animation-fill-mode: both;`兼顾动画前后状态。掌握这两个属性，能更精准地控制CSS动画效果，提升网页用户体验。

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 看开头。

好了，本文到此结束，带大家了解了《CSS动画fill-modeforwards与backwards区别详解》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！