JSFiddle - React, Tailwind, and code Playground

by Hayriye Aydin

HTML

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

CSS

div.box {
  position: fixed;
  z-index: 100;
  background: red;
  width: 100vw;
  height: 100vh;
  top: 50%;
  left: 50%;
  animation: 1s in-out forwards;
}

@keyframes in-out {
  0% {
    transform:translateX(-100%);
		 transform:translateY(-100%);
  }
  100% {
    transform:translateX(100%);
		transform:translateY(100%);
  }
}