CSS动画填充模式

CSS动画填充模式（Animation Fill Mode）是CSS动画模块中的一个关键属性，用于控制动画在执行前后如何将样式应用于目标元素。它决定了元素在动画开始前（`animation-delay`期间）和结束后是否保留关键帧中的样式。

基本概念

动画填充模式通过`animation-fill-mode`属性定义，接受以下值：

• none（默认值）：动画不会在任何阶段应用样式，元素始终显示其原始状态。
• forwards：动画结束后，元素保留最后一帧（100%或`to`）的样式。
• backwards：在动画延迟（`animation-delay`）期间，元素应用第一帧（0%或`from`）的样式。
• both：同时应用`forwards`和`backwards`的效果。

公式表示

动画填充模式的效果可以用以下逻辑表示： $\text{Applied Styles}=\{\begin{array}{ll}\text{Original State}& \text{if }\text{none}\\ \text{Last Keyframe}& \text{if }\text{forwards}\\ \text{First Keyframe}& \text{if }\text{backwards}\\ \text{First/Last Keyframe}& \text{if }\text{both}\end{array}$

代码示例

以下示例展示不同填充模式的效果差异：

/* 定义关键帧动画 */
@keyframes slide {
  from { transform: translateX(-100px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

.box {
  width: 100px;
  height: 100px;
  background: blue;
  animation: slide 2s 1s; /* 持续时间2秒，延迟1秒 */
}

/* 不同填充模式的类 */
.none     { animation-fill-mode: none; }
.forwards { animation-fill-mode: forwards; }
.backwards{ animation-fill-mode: backwards; }
.both     { animation-fill-mode: both; }

对应的HTML结构：

<div class="box none">None</div>
<div class="box forwards">Forwards</div>
<div class="box backwards">Backwards</div>
<div class="box both">Both</div>

行为说明

动画阶段样式对比

模式	延迟阶段（0-1秒）	执行阶段（1-3秒）	结束后
原始状态 | 运行动画 | 返回原始状态
原始状态 | 运行动画 | 保持结束状态
初始帧样式 | 运行动画 | 返回原始状态
初始帧样式 | 运行动画 | 保持结束状态

可视化时间轴

gantt title animation-fill-mode 时间轴效果 dateFormat S axisFormat %s秒 section none 原始状态 :a1, 0, 1 运行动画 :a2, 1, 3 原始状态 :a3, after a2, 1 section forwards 原始状态 :b1, 0, 1 运行动画 :b2, 1, 3 结束状态 :b3, after b2, 1 section backwards 初始帧样式 :c1, 0, 1 运行动画 :c2, 1, 3 原始状态 :c3, after c2, 1 section both 初始帧样式 :d1, 0, 1 运行动画 :d2, 1, 3 结束状态 :d3, after d2, 1

实际应用场景

场景1：页面加载动画

当元素需要在页面加载时从透明状态淡入，并保持最终不透明状态：

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

.header {
  animation: fadeIn 0.5s forwards;
}

场景2：表单验证提示

错误提示需要立即显示初始状态（红色），然后抖动吸引注意：

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25%     { transform: translateX(-5px); }
  75%     { transform: translateX(5px); }
}

.error-message {
  color: red;
  animation: shake 0.4s both;
}

高级技巧

1. 复合动画控制：结合多个动画时，可通过不同填充模式实现阶段式效果

.element {
  animation: 
    fadeIn 0.5s forwards,
    bounce 1s 0.5s forwards;
}

2. JavaScript交互：当需要通过JS控制动画状态时，`forwards`模式可保持最终样式：

// 点击时触发动画并保持结束状态
element.style.animation = 'slide 1s forwards';

浏览器兼容性

所有现代浏览器均完全支持`animation-fill-mode`属性，包括：

• Chrome 43+
• Firefox 16+
• Safari 9+
• Edge 12+
• Opera 30+

对于IE10-11需要`-ms-`前缀，但建议使用特性检测提供降级方案。

最佳实践

• 优先使用`both`模式确保动画状态的完整性
• 避免在无限循环动画（`animation-iteration-count: infinite`）中使用填充模式
• 与`animation-direction: alternate`配合时，注意结束状态会根据方向变化