note: Please be patient

by Jens Kühn

HTML

<div class="wrapper">
  <h1>Bitte noch etwas Geduld...</h1>
  <h1>Please be patient...</h1>
</div>

SCSS

body {
  margin: 0;
}

.wrapper {  
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100vw;
    animation: my-opacity-animation 4s;
}
h1 {
  position: relative;
  animation: my-move-animation 5s;
  animation-delay: 2s;
  & + h1 {
    display: none;
  }
}

@keyframes my-opacity-animation {
  0%, 75% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes my-move-animation {
  0% {
    transform: translateY(calc(50vh - 4rem));
  }
  100% {
    transform: translateX(0);
  }
}