HTML | DOM 样式 animationFillMode 属性

概述

在 CSS3 中，我们可以通过 animation 注释来实现动画效果。animationFillMode 属性定义了一个动画周期中的状态，默认情况下，动画周期之外的时间是无状态的，这意味着您对任何元素的更改都将在动画结束时立即回到原始条件。但是，animationFillMode 属性可用于指定在动画开始之前或结束之后元素应处于的状态。

语法

/* 单个值语法 */
animation-fill-mode: none|forwards|backwards|both|initial|inherit;

/* 多值语法 */
animation-fill-mode: value1 value2 ...;

其中：

• none：默认值，元素在动画完成前后会根据样式立即恢复到其原始状态。即动画不保留任何状态。
• forwards：动画完成后，元素将设置为最终状态，并将保持这个状态。即动画结束后，元素保留动画最后的状态。
• backwards：在动画开始前，元素将被设置为第一个关键帧的属性值，并在动画开始时逐渐过渡到碰巧包含开始动画的第一帧的属性值。即动画开始前先设置初始状态，然后在动画时过渡到第一帧的属性值。
• both：包含 forwards 和 backwards 效果，即动画开始前先设置初始状态，电影结束后元素保留最终状态。
• initial：将这个属性设置为它的默认值。
• inherit：从父元素继承该属性。

示例

<div class="box"></div>

.box{
    width: 100px;
    height: 100px;
    background-color: red;
    animation: move 3s forwards;
    animation-fill-mode: forwards;
}
@keyframes move {
    from {
        transform: translateX(0);
    }
    to {
       transform: translateX(600px);
    }
}

在上面的示例中，我们使用 animation-fill-mode 属性将动画完成后的最终状态设置为保留状态，即 animation-fill-mode: forwards;。这意味着元素将在动画结束后保持在其新的位置上。

总结

animationFillMode 属性定义了一个动画周期中的状态，包括动画开始前和结束后。它可用于指定在动画开始之前或结束之后元素应处于的状态。默认情况下，动画周期之外的时间是无状态的。使用 animation-fill-mode 属性可以让动画更加生动，使用户体验更好。