JSFiddle - React, Tailwind, and code Playground

HTML

<div id="hover">
</div>
<div id="drop">
  Here I am!
</div>

CSS

:root{
  margin:0;
  padding:0;
}

#hover{
    min-height:4rem;
    position:fixed;
    width:100%;
    top:0;
}
    #hover:hover + #drop{
        transform: translate(0,00%);
    }

#drop{
  font-size:2rem;
  
  position:fixed;
  top:0;

  animation: slide 0.5s 3s, slidepause 3s 0s;
  animation-iteration-count:1;
  animation-timing-function: ease-out;

  transition:0.5s;
  transform: translate(0,-175%);
}
@keyframes slidepause{
    from {transform: translate(0,00%);}
    to {transform: translate(0,00%);}
}
@keyframes slide{
    from {transform: translate(0,00%);}
    to {transform: translate(0,-175%);}
}
#drop:hover{
  transform: none;
}