css animation-fill-mode动画结束状态控制

animation-fill-mode用于控制动画外元素样式状态，其forwards值可使动画结束后保留最终关键帧样式，避免元素“弹回”初始状态。

CSS 中的 animation-fill-mode 属性用于控制动画执行之外的时间内，元素应用的样式状态。它决定了动画在开始前、结束后或整个不播放期间是否保留关键帧中的样式。这个属性对于让动画结束后的元素“停留在”最终状态非常有用。

animation-fill-mode 的取值及作用

该属性有四个常用值，每个值定义了不同的样式应用行为：

• none：默认值。动画在执行时生效，但在动画开始前和结束后不会影响元素的样式，元素会恢复到原始样式。
• forwards：动画结束后，元素将保留最后一个关键帧（即 100% 或 to）中定义的样式，不会恢复初始状态。
• backwards：动画开始前，元素应用第一个关键帧（即 0% 或 from）的样式，但仅在 animation-delay 期间有效。
• both：结合 forwards 和 backwards 的行为，动画既在开始前应用起始样式，又在结束后保留最终样式。

如何让动画结束后保持最终状态

最常见的需求是：动画执行完后，元素不要“弹回”原来的样子。这时应使用 forwards。

BibiGPT-哔哔终结者

B站视频总结器-一键总结 音视频内容

28

查看详情

.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 保留的是最后一次迭代的关键帧，无论重复多少次。

以上就是css animation-fill-mode动画结束状态控制的详细内容，更多请关注php中文网其它相关文章！