%from-top-to-bottom {
  opacity: 0;
  margin-top: -100vh;

  animation-name: start;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  animation-duration: 0.5s;
  animation-play-state: running;

@keyframes start {
  from {
    opacity: 0;
    margin-top: -100vh;
  }
  to {
    opacity: 1;
    margin-top: 0;
  }
}
}