CSS animation value doesn't "stick"

Question

In my web application, I'd like to display a message to the user after signing in or out that fades after a few seconds. I'd like to accomplish this animation with CSS.

Here is my stylesheet:

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

This almost works: after a three-second delay, it begins to fade, then it takes one second to complete the animation. The problem is after the animation is complete the message reappears.

This is what I have to do to get the message to stay hidden:

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

It seems like there should be an easier way to get the first version to work. Am I missing something or do I have to have opacity: 0 on the class as in the second version?

Answer 1

Use animation-fill-mode and set it to forwards:

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