JSFiddle - React, Tailwind, and code Playground

HTML

<p><div id="circle"></div></p>

CSS

@-webkit-keyframes anima{
    0%{
        top: 0px;
        left: 0px;
    }   
    50%{
        top: 0px;
        left: 100%;
        margin-left: -40px;
    }
    100%{
        top: 0px;
        left: 0px;
    }
}
@keyframes anima{
    0%{
        top: 0px;
        left: 0px;
    }   
    50%{
        top: 0px;
        left: 100%;
        margin-left: -40px;
    }
    100%{
        top: 0px;
        left: 0px;
    }
}
	#circle{
		width: 40px;
		height: 40px;
		border-radius: 50%;
		background-color: red;
		position: relative;
		top: 0px;
		left: 0px;
		-webkit-animation: anima 8s infinite;
		-moz-animation: anima 8s infinite;
		animation: anima 8s infinite;
        transition: all 0.4s;
	}