JSFiddle - React, Tailwind, and code Playground

by Saksham Malhotra

HTML

<div class="box">
  <div class="circle one"></div>
  <div class="circle two"></div>
</div>

SCSS

.box {
	background-color: #fff;
	position: relative;
	width: 100%;
	height: 400px;
	//filter: blur(20px) contrast(30);
}

.circle {
	position: absolute;
	background-color: #000;
	width: 150px;
	height: 150px;
	border-radius: 50%;
	left: 0;
	right: 0;
	margin: 150px auto;
	
}
.circle.two {
  animation:moveit 5s infinite;
}
	@keyframes moveit {
	  0%{
	    left:0px;
	  }
    50%{
      left:400px;
    }
    100%{
      left:0px;
    }
	}