CSS animation-fill-mode 属性-之路教程

CSS animation-fill-mode 属性

animation-fill-mode 属性在动画未执行时（开始之前、结束之后或者两者）为元素设置样式。

animation-fill-mode动画填充模式是 CSS3 属性之一。

animation-fill-mode 属性是在播放第一个 @keyframe 之前或者在播放最后一个关键帧之后影响元素的唯一属性。
它可以假定以下值： “forwards”指定元素应保持最后一个关键帧设置的样式值（取决于 animation-iteration-count 和 animation-direction 属性）； "backwards" 指定元素应该获取由第一个关键帧设置的样式值（取决于动画方向）并将其保持在动画延迟时间内； “both”指定动画应遵循“向前”和“向后”的规则，“无”（默认）指定在执行动画之前或者之后不对元素应用任何样式。

当为任何动画属性指定多个逗号分隔值时，它们将以不同的方式添加到动画名称中定义的动画。

初始值	none
应用于	所有元素，它也适用于：：before和：：after伪元素。
继承	无效
可动画的	无效
版本	CSS3
DOM 语法	object.style.animationFillMode=“forwards”；

语法

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

带有“forwards”值的 animation-fill-mode 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 100px;
        height: 100px;
        background: #1c87c9;
        position: relative;
        -webkit-animation: element 5s;
        /* Safari 4.0 - 8.0 */
        -webkit-animation-fill-mode: forwards;
        /* Safari 4.0 - 8.0 */
        animation: element 5s;
        animation-fill-mode: forwards;
      }
      /* Safari 4.0 - 8.0 */
      @-webkit-keyframes element {
        from {
          top: 0px;
        }
        to {
          top: 200px;
          background-color: blue;
        }
      }
      @keyframes element {
        from {
          top: 0px;
        }
        to {
          top: 200px;
          background-color: #8ebf42;
        }
      }
    </style>
  </head>
  <body>
    <h2>Animation-fill-mode example</h2>
    <div></div>
  </body>
</html>

具有 "backwards" 值的 animation-fill-mode 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 100px;
        height: 100px;
        background: #1c87c9;
        position: relative;
        -webkit-animation: element 5s;
        /* Safari 4.0 - 8.0 */
        -webkit-animation-fill-mode: backwords;
        /* Safari 4.0 - 8.0 */
        animation: element 5s;
        animation-fill-mode: backwords;
      }
      /* Safari 4.0 - 8.0 */
      @-webkit-keyframes element {
        from {
          top: 0px;
        }
        to {
          top: 200px;
          background-color: blue;
        }
      }
      @keyframes element {
        from {
          top: 0px;
        }
        to {
          top: 200px;
          background-color: #8ebf42;
        }
      }
    </style>
  </head>
  <body>
    <h2>Animation-fill-mode 示例</h2>
    <div></div>
  </body>
</html>

CSS animation-fill-mode 属性值说明

值	说明
none	这是默认值。动画不会在元素开始前后对其应用任何样式。
forwards	指定元素应保持由最后一个关键帧设置的样式值。
backwords	指定元素应获取由第一个关键帧设置的样式值，并将其保持在动画延迟期间内。
both	指定动画应遵循向前和向后的规则。
initial	它使属性使用其默认值。
inherit	它从其父元素继承属性。

日期：2020-06-02 22:14:24 来源：oir作者：oir

←CSS animation-duration 属性

CSS animation-iteration-count 属性→

语法

带有“forwards”值的 animation-fill-mode 属性示例：

具有 "backwards" 值的 animation-fill-mode 属性示例：

CSS animation-fill-mode 属性值说明

目录