JSFiddle - React, Tailwind, and code Playground

HTML

<div></div>

CSS

div {
    position: absolute;
    left: 315px;
    top: 143px;
    width: 50px;
    height: 50px;
    background: red;
    
    -webkit-animation: myOrbit 6s linear infinite; 
       -moz-animation: myOrbit 6s linear infinite; 
         -o-animation: myOrbit 6s linear infinite; 
            animation: myOrbit 6s linear infinite; 
  
}

@-webkit-keyframes myOrbit {
    from { -webkit-transform: rotate(0deg) translateX(5px) translateY(120px) rotate(0deg);}
    to   { -webkit-transform: rotate(360deg) translateX(5px) translateY(120px) rotate(-360deg); }
}

@-moz-keyframes myOrbit {
    from { -moz-transform: rotate(0deg) translateX(100px) rotate(0deg); }
    to   { -moz-transform: rotate(360deg) translateX(100px) rotate(-360deg); }
}

@-o-keyframes myOrbit {
    from { -o-transform: rotate(0deg) translateX(100px) rotate(0deg); }
    to   { -o-transform: rotate(360deg) translateX(100px) rotate(-360deg); }
}

@keyframes myOrbit {
    from { transform: rotate(0deg) translateX(100px) rotate(0deg); }
    to   { transform: rotate(360deg) translateX(100px) rotate(-360deg); }
}