text that pops up when a button is clicked then fades out html

Question

So I have a button and a text I want to show the text when the button is pressed then wait 2s and the text will fade out how can I do that? I tried making a function that sets the opacity to 1 and then play an animtion that will set the opacity to 0 but it will glitch so i don't know how to do it. Any help will be appreciated!

Answer 1

try something like this to the text but only add the class .text on the button click:

.text {
    animation: text 4s forwards;
}

@keyframes text {
    0% {
        opacity: 0;
    } 25% {
        opacity: 1;
    } 75% {
        opacity: 1;
    } 100% {
        opacity: 0;
    }
}