JSFiddle - React, Tailwind, and code Playground

HTML

Prefixed for webkit for brevity, sorry.< br/>
<div id="example1"><img id="sun" src="http://www.useragentman.com/tests/css3-animation-circle/images/sun.gif"><span class="saturn"><img src="http://www.useragentman.com/tests/css3-animation-circle/images/saturn.png"></span></div>

CSS

#example1 {
	background: #333333;
	overflow: hidden;
	background: url('http://www.useragentman.com/tests/css3-animation-circle/images/space.jpg');
	position: relative;
	display: block;
	width: 830px;
	border: none;
	margin: 0 auto;
	height: 400px;
	overflow: hidden;
}
#sun {
	position: absolute;
	left: 336px;
	top: 163px;
}
span.saturn {
	top: 0;
	left: 336px;
	position: relative;
    -webkit-animation: circle_x 4s linear infinite;
}
span.saturn img {
	left: 0px;
	top: 0px;
    width: 100px;
    height: 100px;
    position: absolute;
	margin: -8px 0 0 -8px;
    -webkit-animation: circle_y 4s linear infinite;
}

@-webkit-keyframes circle_x {
    0%{ left: 336px; -webkit-animation-timing-function: cubic-bezier(0, 0, 0.54, 1.0);}
    25%{ left: 486px; -webkit-animation-timing-function: cubic-bezier(0.46, 0, 1.0, 1.0);}
    50%{ left: 336px; -webkit-animation-timing-function: cubic-bezier(0, 0, 0.54, 1.0);}
    75%{ left: 186px; -webkit-animation-timing-function: cubic-bezier(0.46, 0, 1.0, 1.0);}
    100%{ left: 336px; -webkit-animation-timing-function: cubic-bezier(0, 0, 0.54, 1.0);}
}
@-webkit-keyframes circle_y {
    0%{ top: 0px; -webkit-animation-timing-function: cubic-bezier(0.46, 0, 1.0, 1.0);}
    25%{ top: 150px; -webkit-animation-timing-function: cubic-bezier(0, 0, 0.54, 1.0);}
    50%{ top: 300px; -webkit-animation-timing-function: cubic-bezier(0.46, 0, 1.0, 1.0);}
    75%{ top: 150px; -webkit-animation-timing-function: cubic-bezier(0, 0, 0.54, 1.0);}
    100%{ top: 0px; -webkit-animation-timing-function: cubic-bezier(0.46, 0, 1.0, 1.0);}
}