CSS Animation-Fill-Mode详解：让你的动画“有始有终”，不再“始乱终弃”
想象一下，你辛辛苦苦编排了一段精彩的舞蹈，舞者们也排练得热火朝天。可当演出结束，灯光亮起，舞者们却瞬间“啪叽”一下，回到初始站位，之前的优美姿态荡然无存，只留下观众一脸懵逼。是不是觉得很可惜，很煞风景？
CSS动画也是一样的道理。如果没有妥善处理动画结束后的状态，再炫酷的动画效果也会大打折扣，甚至适得其反。今天，我们就来聊聊CSS动画中的“善后大师”—— animation-fill-mode，让你的动画“有始有终”，不再“始乱终弃”。
什么是 animation-fill-mode？
简单来说，animation-fill-mode 属性决定了动画在播放之前和之后，目标元素应该应用哪些样式。它就像一个“定妆喷雾”，能把动画的起始和结束状态固定下来，让元素保持特定的外观，避免出现动画结束后“打回原形”的尴尬局面。
animation-fill-mode 的四个取值，以及它们背后的故事
animation-fill-mode 主要有四个取值，每一个都对应着一种不同的“善后”策略：
-
none(默认值): “事后诸葛亮”的淡定这是
animation-fill-mode的默认值，也是最“佛系”的一种处理方式。选择none，就意味着动画结束后，元素会立即恢复到动画开始之前的状态，就像什么都没发生过一样。你可以把它想象成一个魔术师表演完消失魔术，助手们迅速把所有道具撤走，舞台又恢复了原样。虽然魔术很精彩，但结束后一切都归于平静，没有任何“后遗症”。
适用场景： 这种模式适用于那些动画效果只起到短暂的点缀作用，不需要长期保持动画结束状态的场景。例如，按钮点击时的短暂高亮效果，或者页面加载时的简单过渡动画。
-
forwards： “言出必行”的承诺forwards就像一个信守承诺的君子，它会告诉浏览器：动画结束后，请保持动画最后一帧的状态。也就是说，元素会停留在动画结束时的样式，直到被其他样式覆盖。你可以把它想象成一个雕塑家完成了一件精美的雕塑作品，他会小心翼翼地把雕塑摆放在展台上，让人们可以欣赏它的最终形态。
适用场景： 这种模式适用于那些需要让元素保持动画结束状态的场景。例如，进度条动画，用户希望看到进度条停留在100%的状态；或者一个展开收起动画，用户希望元素保持展开或收起的状态。
-
backwards： “未雨绸缪”的准备backwards就像一个有先见之明的预言家，它会告诉浏览器：动画开始之前，请先应用动画第一帧的样式。也就是说，元素会立即呈现动画第一帧的样式，即使动画还没有开始播放。你可以把它想象成一个演员在正式演出之前，先穿好戏服，化好妆，让自己提前进入角色状态。
适用场景： 这种模式适用于那些需要提前改变元素样式的场景。例如，一个淡入动画，你希望元素在动画开始之前就已经透明，而不是突然从不透明变为透明。
-
both： “内外兼修”的完美主义both就像一个追求完美的艺术家，它结合了forwards和backwards的优点。也就是说，动画开始之前，元素会应用动画第一帧的样式；动画结束后，元素会保持动画最后一帧的样式。你可以把它想象成一个建筑师设计了一栋既实用又美观的房子，在建造之前，他会先展示房子的效果图，让人们了解房子的外观；建造完成后，房子会永远保持这个既实用又美观的状态。
适用场景： 这种模式适用于那些需要同时控制动画开始之前和结束之后元素样式的场景。例如，一个复杂的动画序列，你希望元素在动画开始之前就呈现特定的样式，并在动画结束后保持最终状态。
举个栗子，让你彻底明白
为了更好地理解 animation-fill-mode 的作用，我们来看一个简单的例子：
<!DOCTYPE html>
<html>
<head>
<title>Animation Fill Mode Example</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
position: relative; /* 必须设置 position 才能让 animation 生效 */
animation-name: move;
animation-duration: 2s;
animation-iteration-count: 1;
/* animation-fill-mode: none; */ /* 尝试不同的值 */
}
@keyframes move {
0% {
left: 0;
background-color: red;
}
100% {
left: 200px;
background-color: blue;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>在这个例子中，我们创建了一个红色的方块，并定义了一个名为 move 的动画，让方块从左向右移动，并改变颜色。
现在，我们来尝试不同的 animation-fill-mode 值，看看会发生什么：
-
animation-fill-mode: none;(默认值):动画结束后，方块会立即回到初始位置，变成红色。就像什么都没发生过一样。
-
animation-fill-mode: forwards;动画结束后，方块会停留在最右边的位置，并变成蓝色。
-
animation-fill-mode: backwards;动画开始之前，方块会立即变成红色（因为动画第一帧的背景色是红色）。动画结束后，它会回到初始位置，变成红色。
-
animation-fill-mode: both;动画开始之前，方块会立即变成红色。动画结束后，它会停留在最右边的位置，并变成蓝色。
通过这个例子，你可以清楚地看到 animation-fill-mode 在控制动画起始和结束状态方面的作用。
一些需要注意的细节
-
animation-direction的影响：animation-direction属性决定了动画的播放方向。如果设置为alternate或alternate-reverse，animation-fill-mode的行为会略有不同。例如，当animation-direction为alternate时，forwards会让元素停留在动画结束时的状态（偶数次迭代）或动画开始时的状态（奇数次迭代）。 -
animation-delay的影响：animation-delay属性决定了动画开始播放的延迟时间。如果设置了animation-delay，backwards会在延迟期间应用动画第一帧的样式。 -
优先级问题：
animation-fill-mode设置的样式可能会被其他样式覆盖。你需要注意样式的优先级，确保animation-fill-mode能够生效。
总结：让你的动画更精致
animation-fill-mode 是一个非常实用的 CSS 属性，它可以让你更好地控制动画的起始和结束状态，让你的动画更加精致、流畅。掌握了 animation-fill-mode 的用法，你就可以避免动画结束后“打回原形”的尴尬局面，让你的网页更加生动有趣。
下次在写CSS动画的时候，别忘了给你的动画加上“定妆喷雾”，让它们“有始有终”，完美谢幕！