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;
}