Fade out after div content has been shown using CSS

Question

I\'m trying to show a notification on button click. The button click actually checks for email validation. I know to show a div with content with the error message. However,

Answer 1

Using css3 keyframe animation:

(You'll probably want to add -webkit- -moz-, -ms-, and -o- prefixes on the animation and animation-delay properties inside .error-message and on the keyframes to support older browsers.)

.error-message {
    animation: fadeOut 2s forwards;
    animation-delay: 5s;
    background: red;
    color: white;
    padding: 10px;
    text-align: center;
}

@keyframes fadeOut {
    from {opacity: 1;}
    to {opacity: 0;}
}

    
Some random text