JSFiddle - React, Tailwind, and code Playground

by Ravindra Athreya

HTML

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

CSS

.box1{
  width:200px;
  height:200px;
  background:rgba(255,0,0,0.5);
  position:absolute;
  top:100px;
  left:50%;
  margin-left:-100px;
}

.box2{
  width:200px;
  height:200px;
  background:rgba(0,0,255,0.5);
  position:absolute;
  top:100px;
  left:90%;
  margin-left:-100px;
  -webkit-animation:movingbox 5s infinite;
  animation:movingbox 5s infinite;
}

@-webkit-@-webkit-keyframes movingbox{
  from{left:90%;-webkit-transform: rotate(0deg);}
  to{left:10%;-webkit-transform: rotate(360deg);}
}

@keyframes movingbox{
  from{left:90%;transform: rotate(0deg);}
  to{left:10%;transform: rotate(360deg);}
}