JSFiddle - React, Tailwind, and code Playground

HTML

<div id="alert-success">
    Well done! You successfully read this important alert message.
</div>

CSS

#alert-success{
    background-color: #FF0000;
    animation:alert-success 0.5s 1;
    -webkit-animation:alert-success 0.5s 1;
    animation-fill-mode: forwards;
    
    animation-delay:2s;
    -webkit-animation-delay:1s; /* Safari and Chrome */
    -webkit-animation-fill-mode: forwards;
    
} 

@-webkit-keyframes alert-success{
    0%   {opacity: 1;}
    70%  {opacity: 1;}
    90% {opacity: 1;-webkit-transform: translateY(0px);}
    100% {opacity: 0;-webkit-transform: translateY(-30px);}
}