CSS动画值不会“粘住”

Question

在我的web应用程序中，我想在登录或退出几秒钟后显示一条消息给用户。我想用CSS来完成这个动画。

下面是我的样式表：

@keyframes fadeout {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
.flash-message {
    animation: fadeout 1s 3s;
}

这几乎是可行的:经过三秒的延迟，它开始褪色，然后用一秒来完成动画。问题是动画完成后消息会重新出现。

这是我必须做的，才能让信息隐藏起来：

@keyframes fadeout {
    0% {
        opacity: 1;
    }
    75% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
.flash-message {
    animation: fadeout 4s;
    opacity: 0;
}

似乎应该有一个更容易的方法，使第一个版本的工作。我是遗漏了什么，还是必须像第二个版本那样在类中使用opacity: 0？

Answer 1

使用animation-fill-mode并将其设置为forwards

@keyframes fadeout {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
.flash-message {
    animation: fadeout 1s 3s forwards;
}

Answer 2

正如杰森的回答所解释的那样，animation-fill-mode是最好的选择。它定义了CSS属性是否和如何在动画之外应用。

它的默认设置是none，它只在动画执行时应用属性。

将其设置为forwards将永久应用上一个keyframe值中的属性。

有关更多信息，请参见值列表。