动画的填充模式

动画的填充模式

CSS动画的填充模式（animation-fill-mode）决定了动画在执行前后如何将样式应用到目标元素上。它控制着动画开始前和结束后的状态，确保元素在非激活阶段也能保持特定样式。填充模式有四种可选值：none、forwards、backwards和both，每种值对元素的影响各不相同。

填充模式的基本概念

动画填充模式的核心在于解决动画时间线之外的样式表现问题。默认情况下，元素在动画开始前和结束后会恢复到原始状态，但通过填充模式可以改变这一行为。理解填充模式需要结合动画的两个关键时间点：动画开始前（0%或from关键帧）和动画结束后（100%或to关键帧）。

.box {
  width: 100px;
  height: 100px;
  background: red;
  animation: move 2s;
  animation-fill-mode: none; /* 默认值 */
}

@keyframes move {
  from { transform: translateX(0); }
  to { transform: translateX(100px); }
}

none填充模式

animation-fill-mode: none是默认值，表示动画不会在任何时间点之外应用样式。元素在动画开始前保持原始状态，动画结束后立即恢复到原始状态。这种模式适合需要完全还原的场景。

<div class="box none-mode"></div>

.none-mode {
  animation-fill-mode: none;
}

在这个例子中，红色方块会在动画执行期间向右移动100像素，但动画结束后会立即跳回原位。如果动画有延迟（animation-delay），在延迟期间元素也保持原始状态。

forwards填充模式

animation-fill-mode: forwards会让元素在动画结束后保留最后一帧的样式。这对于需要保持动画最终状态的场景非常有用，比如模态框的淡入效果。

.forwards-mode {
  animation-fill-mode: forwards;
}

假设关键帧定义了透明度的变化：

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal {
  animation: fadeIn 1s forwards;
}

模态框在淡入完成后会保持完全不透明（opacity: 1），而不会突然消失。需要注意的是，如果动画被中断（例如通过JavaScript），元素可能不会保持在最后一帧的状态。

backwards填充模式

animation-fill-mode: backwards使元素在动画延迟期间立即应用第一帧的样式。这在需要预加载动画初始状态的场景中特别实用，比如元素需要先隐藏再淡入。

.backwards-mode {
  animation-delay: 1s;
  animation-fill-mode: backwards;
}

配合以下关键帧：

@keyframes slideIn {
  from { 
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.header {
  animation: slideIn 0.5s backwards;
}

即使动画有1秒延迟，标题元素会立即应用from关键帧的样式（完全透明且上移），然后在延迟结束后开始动画。这避免了元素在延迟期间突然"闪现"原始状态的问题。

both填充模式

animation-fill-mode: both结合了forwards和backwards的特性：元素在延迟期间显示第一帧样式，动画结束后保持最后一帧样式。这是最全面的填充模式，适用于大多数需要完美状态控制的场景。

.both-mode {
  animation-delay: 0.5s;
  animation-fill-mode: both;
}

@keyframes grow {
  0% { 
    width: 50px;
    background: yellow;
  }
  100% { 
    width: 200px;
    background: blue;
  }
}

.growing-box {
  width: 100px;
  height: 100px;
  animation: grow 1s both;
}

这个方框在0.5秒延迟期间会立即变为50px宽且黄色（第一帧样式），动画结束后保持200px宽且蓝色（最后一帧样式）。整个过程不会出现原始100px宽度的状态。

填充模式的实际应用

填充模式在界面交互中起着关键作用。比如制作一个加载指示器，需要让旋转动画结束后保持可见：

@keyframes spin {
  to { transform: rotate(360deg); }
}

.loader {
  animation: spin 1s infinite forwards;
}

或者在页面滚动时触发的动画，需要确保元素在视口外时保持隐藏：

@keyframes slideUp {
  from { 
    transform: translateY(100px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.feature-card {
  animation: slideUp 0.8s both;
  animation-timeline: view();
  animation-range: entry 20% cover 30%;
}

填充模式与动画方向的交互

当动画方向（animation-direction）设置为alternate或alternate-reverse时，填充模式的行为会有些微妙变化。最后一帧的定义取决于动画循环的结束点：

.alternate-box {
  animation: pulse 2s alternate 2 both;
}

@keyframes pulse {
  from { transform: scale(1); }
  to { transform: scale(1.5); }
}

这个元素会在两次交替缩放后保持最后的状态（可能是1.5倍或原始大小，取决于循环次数是奇数还是偶数）。开发者需要特别注意这种边界情况。

性能考量

虽然填充模式不会直接影响动画性能，但保持元素在动画结束后的样式可能会影响后续渲染。特别是使用forwards或both时，浏览器需要持续维护这些样式状态。对于大量动画元素，建议在适当时候通过JavaScript移除动画类名来释放资源：

element.addEventListener('animationend', () => {
  // 执行必要的清理工作
});

浏览器兼容性提示

所有现代浏览器都完全支持动画填充模式，包括移动端浏览器。但在某些旧版本浏览器（如IE10）中，backwards和both对延迟期间的状态处理可能不一致。可以通过特性检测提供回退方案：

@supports not (animation-fill-mode: backwards) {
  .fallback {
    opacity: 0; /* 手动设置初始状态 */
  }
}