用动画补“留白”：HTML 动画的 animation-fill-mode 实战要点

在网页上做动画，常会遇到“到点了没留白”的情况：元素在关键时间点突然跳到目标状态，缺少过渡让人物动作或页面切换显得突兀。用 CSS 的 animation-fill-mode 就能优雅地把这种跳变变成平滑的延续或预设状态，让动画更自然、可预期。

为什么需要 animation-fill-mode

想象你在做一个电商页面，商品从列表滑入详情时，想让缩略图在进入前保持最后一页的样式；或者在表单提交成功后，想让提示信息有停留的一瞬间，而不是瞬间消失。这些都是通过填充模式来实现的现实需求。

核心模式与场景对照

• none（默认）：动画只在 @keyframes 指定的时间段内生效，关键时间点外不延续也不预设。适合对状态转换敏感的场景，如开关按钮的瞬间切换。
• lags：在动画结束后的剩余时间延续当前状态，常用于“动画后停留”的效果，如按钮点击后的淡出。
• paused：关键时间点外不生效，到达关键时间点时快速跳到对应状态，之后若动画被暂停，会保持该状态。适合需要预设状态以衔接前后逻辑的场景，比如从列表切换到详情前预加载详情样式。
• both：同时启用开始和结束的填充，动画前后都有状态延续，适合过渡段落需要双重预设的界面切换。

实战技巧

场景一：表单提交的平滑反馈

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.feedback {
  animation: fadeIn 0.3s ease;
  animation-fill-mode: forwards;
}

在提交成功后，提示信息会保持显示0.3秒的延续，避免“刚看到就没了”的挫败感。

场景二：预设目标状态

@keyframes slideIn {
  from { transform: translateY(20px); }
  to { transform: translateY(0); }
}
.card {
  animation: slideIn 0.5s ease;
  animation-fill-mode: backwards;
}

在动画开始前，元素会预设到目标位置，减少动画启动时的位移感。

场景三：双端延续

@keyframes pulse {
  from { transform: scale(1); }
  50% { transform: scale(1.1); }
  to { transform: scale(1); }
}
.box {
  animation: pulse 1s ease;
  animation-fill-mode: both;
}

动画前后都会保持目标状态，使中间的放大更自然，结束后的“回弹”更干净利落。

常见坑点与修复

• 误用 forwards 导致内存泄漏：在浏览器历史前进/后退时，页面会保留动画结束状态，导致内存不释放。遇到此类问题，将动画设为 none 或 backwards，或在动画结束后手动重置状态。
• 过渡与时效配合不佳：动画持续时间与填充模式要成比例配合，否则会出现“跳大步”或“拖太慢”的体验。通过调整持续时间与 easing，结合填充模式，逐步微调达到最佳效果。
• CSS 预加载的局限：某些浏览器对动画预加载的实现不一致，导致在动画开始前的状态可能与预期有差异。使用 backwards 时需关注兼容性与实际测试。

结语

掌握 animation-fill-mode 并不只是一句属性的使用，而是理解动画在不同场景下的行为与预期，用合适的填充模式让页面状态转换更自然、更可控。通过针对具体场景做小步快跑的微调，你会在交互细节上收获更细腻的用户体验。