JSFiddle - React, Tailwind, and code Playground

by deloop_

HTML

<div id = "container">
    <div id = "logo" class = "d"></div>
</div>

CSS

.d {
  display: inline-block;
  width: 40px;
  height: 40px;
  background-color: #F44336;
}

#container {
  position: absolute;
  top: calc(50% - 20px);
  left: calc(50% - 20px);
}


@keyframes rotate {
  0% {
    transform: translateX(0px);
    transform: rotate(0deg);
  }
  50% {
    transform: translateX(500px);
    transform: rotate(0deg);
  }
  100% {
   transform: rotate(1240deg); 
  }
}
 
#logo {
  animation: rotate 2.5s ease-out 0s 1 normal;
}