Question

在我的网络应用程序中，我希望在登录或退出后向用户显示一条消息，在几秒钟后消失。我想用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

正如Jason's answer所解释的，animation-fill-mode是必经之路。它定义是否以及如何在动画外部应用CSS属性。

其默认设置为none，该设置仅在动画执行时才应用属性。

将其设置为forwards会永久应用最后一个关键帧值中的属性。

有关更多信息，请参见list of values。

CSS动画价值并没有＆＃34;坚持＆＃34;

2 个答案: