编辑“︁CSS动画填充模式”︁

{{DISPLAYTITLE:CSS动画填充模式}}

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

== 基本概念 ==

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

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

=== 公式表示 ===
动画填充模式的效果可以用以下逻辑表示：
<math>
\text{Applied Styles} = \begin{cases}
\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{cases}
</math>

== 代码示例 ==

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

<syntaxhighlight lang="css">
/* 定义关键帧动画 */
@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; }
</syntaxhighlight>

对应的HTML结构：
<syntaxhighlight lang="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>
</syntaxhighlight>

=== 行为说明 ===
{| class="wikitable"
|+ 动画阶段样式对比
! 模式 !! 延迟阶段（0-1秒） !! 执行阶段（1-3秒） !! 结束后
|-
| '''none'''     | 原始状态 | 运行动画 | 返回原始状态
|-
| '''forwards''' | 原始状态 | 运行动画 | 保持结束状态
|-
| '''backwards'''| 初始帧样式 | 运行动画 | 返回原始状态
|-
| '''both'''     | 初始帧样式 | 运行动画 | 保持结束状态
|}

== 可视化时间轴 ==
<mermaid>
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
</mermaid>

== 实际应用场景 ==

=== 场景1：页面加载动画 ===
当元素需要在页面加载时从透明状态淡入，并保持最终不透明状态：
<syntaxhighlight lang="css">
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.header {
  animation: fadeIn 0.5s forwards;
}
</syntaxhighlight>

=== 场景2：表单验证提示 ===
错误提示需要立即显示初始状态（红色），然后抖动吸引注意：
<syntaxhighlight lang="css">
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25%     { transform: translateX(-5px); }
  75%     { transform: translateX(5px); }
}

.error-message {
  color: red;
  animation: shake 0.4s both;
}
</syntaxhighlight>

== 高级技巧 ==

1. '''复合动画控制'''：结合多个动画时，可通过不同填充模式实现阶段式效果
<syntaxhighlight lang="css">
.element {
  animation: 
    fadeIn 0.5s forwards,
    bounce 1s 0.5s forwards;
}
</syntaxhighlight>

2. '''JavaScript交互'''：当需要通过JS控制动画状态时，`forwards`模式可保持最终样式：
<syntaxhighlight lang="javascript">
// 点击时触发动画并保持结束状态
element.style.animation = 'slide 1s forwards';
</syntaxhighlight>

== 浏览器兼容性 ==

所有现代浏览器均完全支持`animation-fill-mode`属性，包括：
* Chrome 43+
* Firefox 16+
* Safari 9+
* Edge 12+
* Opera 30+

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

== 最佳实践 ==

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

[[Category:CSS动画]]
[[Category:前端开发]]
[[Category:Web技术]]

[[Category:编程语言]]
[[Category:CSS]]