JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="ru">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=">
    <title></title>
  </head>

  <body>
    <button id="_btn">
      GO!
    </button>
    <div class="first" id="_first">

    </div>
  </body>

</html>

CSS

.first:before {
  background: #000;
  height: 100vh;
  content: '';
  width: 100%;
  top: -100%;
  position: absolute;
  z-index: 1;
}

.first.animate:before {
  animation: eye 3s ease-in-out forwards;
}


@keyframes eye {
  0% {
    top: -100%;
  }

  30% {
    top: 0;
  }

  80% {
    top: 0;
  }

  100% {
    top: 100%;
  }
}

.first {
  height: 100vh;
}

JavaScript

_btn.onclick = () => {
  _first.classList.add('animate')
}