CSS3 animation-fill-mode 属性

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

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

语法

-------------------- ---- - -------- - --------- - -----

示例

---- -
  ------ ------
  ------- ------
  ----------------- ----
  ---------- ----------- -- ------ ---------
  -------------------- ----------
-

---------- ----------- -
  -- -
    ---------- ---------
  -
  ---- -
    ---------- ---------
  -
-

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