CSS3 animation-fill-mode 属性

animation-fill-mode 属性指定了动画在播放之前和之后如何应用样式。它有四个值可选：none、forwards、backwards 和 both。

• none：在动画播放之前和之后都不会应用任何样式。元素将保持其初始状态。
• forwards：在动画播放结束后，元素将应用最后一个关键帧的样式。
• backwards：在动画播放之前，元素将应用第一个关键帧的样式。
• both：同时应用 forwards 和 backwards 的效果。

语法

animation-fill-mode: none | forwards | backwards | both;

示例

// www.javascriptcn.com code example
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: myAnimation 2s linear forwards;
  animation-fill-mode: backwards;
}

@keyframes myAnimation {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(2);
  }
}

在上面的示例中，.box 元素应用了一个名为 myAnimation 的动画，持续时间为 2 秒，线性变化，并且在播放结束后保持最后一个关键帧的样式。同时，由于设置了 animation-fill-mode: backwards;，在动画播放之前，元素将应用第一个关键帧的样式，即 transform: scale(1);。