css animation-fill-mode forwards与backwards区别

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。

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

稿定AI社区

在线AI创意灵感社区

60

查看详情

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 animation-fill-mode forwards与backwards区别的详细内容，更多请关注php中文网其它相关文章！