CSS中的animation-fill-mode属性详解

一、属性描述
animation-fill-mode 是CSS动画的一个关键属性，它控制动画在执行之前和之后如何将样式应用到目标元素。默认情况下，CSS动画在播放前不会影响元素样式，播放结束后会立即移除所有动画样式。animation-fill-mode 允许你改变这种默认行为，确保元素在动画延迟期间或动画结束后保持特定的状态。

二、属性值详解
该属性有四个可能的值：

1. none（默认值）

   • 动画在执行前不会将任何关键帧样式应用到元素。
   • 动画执行后，元素会立即恢复到动画前的原始样式。
   • 元素仅在动画执行期间（从开始到结束的持续时间内）应用关键帧样式。

2. forwards

   • 动画执行后，元素将保持最后一个关键帧的样式（由animation-direction和animation-iteration-count决定具体是哪个关键帧）。
   • 动画执行前，行为与none相同，不会应用初始关键帧样式。

3. backwards

   • 动画执行前，元素立即应用第一个关键帧的样式（由animation-direction决定），并在动画延迟期间保持此样式。
   • 动画执行后，元素会立即恢复到动画前的原始样式。

4. both

   • 结合了forwards和backwards的效果。
   • 动画执行前，应用第一个关键帧的样式（在延迟期间保持）。
   • 动画执行后，保持最后一个关键帧的样式。

三、关键概念与注意事项

1. “第一个”和“最后一个”关键帧的定义
   这取决于animation-direction属性：

   • 当animation-direction: normal或alternate（且迭代次数为奇数）时，0%或from是关键帧是第一个，100%或to是关键帧是最后一个。
   • 当animation-direction: reverse或alternate-reverse（且迭代次数为奇数）时，100%是关键帧是第一个，0%是关键帧是最后一个。
   • 在alternate模式下，如果迭代次数是偶数，则“最后一个”关键帧是0%。

2. 与animation-delay的配合
   backwards和both在延迟期间就应用第一关键帧样式，这对于实现“入场前准备”效果非常有用。

3. 与animation-iteration-count: infinite的互动
   当动画设置为无限循环时，forwards和both在逻辑上没有意义（因为动画永不结束），因此它们的行为将与none相同。但backwards在延迟期间的应用仍然有效。

四、实战示例与步骤解析

假设我们有一个简单的方形元素和一个淡入并右移的动画：

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  /* 初始状态：不透明，位置在左侧 */
  opacity: 1;
  transform: translateX(0);
  /* 定义动画：持续2秒，延迟1秒开始，只播放一次 */
  animation-name: slideAndFade;
  animation-duration: 2s;
  animation-delay: 1s;
  animation-iteration-count: 1;
}

@keyframes slideAndFade {
  0% {
    opacity: 0;
    transform: translateX(-50px);
  }
  100% {
    opacity: 1;
    transform: translateX(50px);
  }
}

步骤1：使用默认值 none

• 动画前（延迟1秒期间）：元素保持蓝色，位于原位（opacity: 1, transform: translateX(0)）。
• 动画中（第1-3秒）：从完全透明且左移50px开始，逐渐变为不透明并右移50px。
• 动画后（3秒后）：元素立即跳回蓝色，位于原位。动画效果完全消失。

步骤2：使用 forwards

• 动画前：同none，保持原始样式。
• 动画中：同上。
• 动画后：元素保持100%关键帧的样式：不透明（opacity: 1），且位于右移50px的位置。它不会跳回原位。

步骤3：使用 backwards

• 动画前：在1秒延迟期间，元素立即应用0%关键帧的样式：完全透明（opacity: 0）且左移50px。视觉上元素“消失”并左移。
• 动画中：从透明左移状态开始，动画到不透明右移状态。
• 动画后：动画结束，元素立即跳回原始的蓝色原位。

步骤4：使用 both

• 动画前：在延迟期间，应用0%关键帧样式（透明左移）。
• 动画中：正常播放。
• 动画后：保持100%关键帧样式（不透明右移）。这是最符合直觉的“淡入右移并停留”效果。

五、核心应用场景总结

1. 保持动画结束状态 (forwards): 制作元素动画后停留在最终位置/状态的场景，如模态框弹出后保持显示。
2. 预填充动画开始状态 (backwards): 实现动画开始前元素就处于“准备状态”，尤其在有延迟时避免元素“闪动”到初始位置。
3. 无缝衔接状态 (both): 最常用的场景之一，确保动画在延迟前就有起始状态，结束后又保留最终状态，实现流畅的“状态切换”。

六、记忆技巧
可以这样理解：forwards是“向前看”，关注动画之后的状态；backwards是“向后看”，关注动画之前的状态；both是“前后都看”；none是“前后都不看”，只管播放期间。