CSS 动画填充模式属性-猿码集

1. CSS 动画概述

CSS动画可以轻松实现网页中的各种各样的动画，例如旋转，缩放等等。在过去几年中，CSS动画已经成为了前端开发中的一个非常重要的技能。CSS动画的好处在于不需要依赖JavaScript，动画的性能也比JavaScript实现的动画更加流畅。

在CSS3中，我们可以通过transition，animation和transform属性来创建动画效果。其中，animation更加强大，可以实现更为复杂的动画效果（例如，多个关键帧，动画方向等）。而在这些属性中，fill-mode属性也是一个非常重要的属性。

CSS动画中的fill-mode属性是用来设置动画在运行之前和之后，使用关键帧的值将会被应用到元素上。它有四个可能的值：none，forwards，backwards和both。默认值是none，也就是说在动画结束后恢复到原始状态。

none选项将不使用动画的关键帧状态来修改元素；当动画完成时，元素将会恢复到最开始的状态。以下的CSS代码展示了none选项的使用：


div {
  animation: drop 2s;
  animation-fill-mode: none;
}
@keyframes drop {
  from { top: 0; }
  to { top: 100px; }
}

在上面的例子中，div元素将会在2秒内从顶端下滑到底端，当动画完成时，它将会返回其最开始的状态。

forwards选项会使动画元素停留在其结束时的状态，并且不会返回元素的最开始状态。以下的CSS代码展示了forwards选项的使用：


div {
  animation: drop 2s;
  animation-fill-mode: forwards;
}
@keyframes drop {
  from { top: 0; }
  to { top: 100px; }
}

在上面的例子中，div元素将会在2秒内从顶端下滑到底端，当动画完成时，它将会停留在底部，不会回到顶部。

backwards选项将使动画元素在运行之前到达开始状态，并应用相应的CSS属性。以下的CSS代码展示了backwards选项的使用：


div {
  animation: drop 2s;
  animation-fill-mode: backwards;
}
@keyframes drop {
  from { top: 0; }
  to { top: 100px; }
}

在上面的例子中，div元素将会在2秒内从顶端下滑到底端之前，立即到达最开始的状态（top ：0），然后再开始动画下滑到底部。

both选项是forwards和backwards的组合。它会使动画元素停留在其结束时的状态，并且在运行之前到达开始状态并使用相应的CSS属性。以下是一个CSS示例，展示了如何使用both：


div {
  animation: drop 2s;
  animation-fill-mode: both;
}
@keyframes drop {
  from { top: 0; }
  to { top: 100px; }
}

在上面的例子中，div元素将会在2秒内从顶端下滑到底端，当动画完成时，它将会停留在底部，不会回到顶部，并在动画开始之前到达其最开始的状态。

使用fill-mode属性不仅可以优化CSS动画的性能，还可以让动画效果更加自然。这个属性的四种填充模式可以用来设置动画的时序，根据实际需求选择合适的填充模式可以让动画更加准确，达到理想的效果。