JSFiddle - React, Tailwind, and code Playground

by DugSohn

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.css">
<div>Hello</div>
<h1>Hover me</h1>

CSS

h1 { padding: 20px; }
div {
    width: 100%; background: lightyellow; padding: 20px;
    
    display: none;
}

body:hover div {
    display: block;
    -webkit-animation: slide-down .4s ease-out;
    -moz-animation: slide-down .4s ease-out;
}

@-webkit-keyframes slide-down {
      0% { opacity: 0; -webkit-transform: translateY(-100%); }  
          10% { opacity: 1; -webkit-transform: translateY(30); }

    80% { opacity: 1; -webkit-transform: translateY(50); }

    100% { opacity: 1; -webkit-transform: translateY(0); }
}
@-moz-keyframes slide-down {
      0% { opacity: 0; -moz-transform: translateY(-100%); }  
                10% { opacity: 1; -webkit-transform: translateY(30); }
    80% { opacity: 1; -webkit-transform: translateY(50); }

    100% { opacity: 1; -moz-transform: translateY(0); }
}