JSFiddle - React, Tailwind, and code Playground

HTML

<div id="div1">linear</div>

CSS

div {
    width: 100%;
    position: absolute;
    z-index: 999;
    background: black;
    color: white;
    padding: 10px;
    font-weight: bold;
    -webkit-animation: mymoveClose 1s; /* Chrome, Safari, Opera */
    animation: mymoveClose 1s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
}

div:empty {
   
    -webkit-animation: mymove 1s; /* Chrome, Safari, Opera */
    animation: mymove 1s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
    from {bottom: -30px;}
    to {bottom: 0px;}
}

/* Standard syntax */
@keyframes mymove {
    from {bottom: -30px;}
    to {bottom: 0px;}
}


/* Chrome, Safari, Opera */
@-webkit-keyframes mymoveClose {
    from {bottom: 0px;}
    to {bottom: -30px;}
}

/* Standard syntax */
@keyframes mymoveClose {
    from {bottom: 0px;}
    to {bottom: -30px;}
}

JavaScript

setTimeout(function(){ 
  document.getElementById('div1').innerHTML = '';
}, 3000);