CSS animation-fill-mode 属性

主题

默认模式
浅蓝色模式
淡绿色模式
深夜模式

定义和用法

animation-fill-mode属性定义了 CSS 动画在执行前后如何将样式应用于其目标元素。类似给动画设置一个封面展示。

当使用多个动画时，后面的动画可能会覆盖前面动画的fill-mode效果。
与animation-iteration-count: infinite一起使用时，forwards和both不会产生效果，因为动画永远不会"完成"。

常用的实例

接下来通过多个实例演示animation-fill-mode属性的用法，来深化您对animation-fill-mode属性的理解。

实例代码运行代码

复制

.demo-none {
    animation: move 2s 1s;
    animation-fill-mode: none;
  }

.demo-forwards {
    animation: move 2s 1s;
    animation-fill-mode: forwards;
}

.demo-backwards {
    animation: move 2s 1s;
    animation-fill-mode: backwards;
}

.demo-both {
    animation: move 2s 1s;
    animation-fill-mode: both;
}

@keyframes move {
    from {
      transform: translateX(0%);
      background-color: #e74c3c;
    }
    to {
      transform: translateX(500px);
      background-color: #2ecc71;
    }
}

CSS 语法

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

属性值

值	描述
`none`	动画在执行前后不会应用任何样式到元素（默认值）。元素将保持其原有样式或遵循其他 CSS 规则。
`forwards`	动画完成后，元素将保留最后一个关键帧的样式。最后一个关键帧取决于`animation-direction`和`animation-iteration-count`。
`backwards`	动画延迟期间，元素将应用第一个关键帧的样式。第一个关键帧取决于`animation-direction`。
`both`	同时应用`forwards`和`backwards`的效果。动画延迟期间使用第一个关键帧样式，动画完成后保留最后一个关键帧样式。