JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div class="box">
  <div class="box1"></div>
</div>

CSS

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: black;
  overflow: hidden;
}
div.box {
  width: 50vw;
  height: 400px;
  top: 100px;
  background: purple;
  position: relative;
  left: 270px;
  animation: my 2s cubic-bezier(0.65, 0.01, 0, 0.99) forwards;
}
div.box1 {
  width: 100%;
  height: 20%;
  position: absolute;
  bottom:0;
  left:0;
  background: white;
  animation: myy 2.3s cubic-bezier(0.65, 0.01, 0, 0.99) forwards;
}
@keyframes my {
  100% { 
    transform: translateX(calc(104vw - 270px));
  }
}
@keyframes myy {
  100% { 
    transform: translateX(-5%);
    animation-timing-function: ease-out;
  }
}