JSFiddle - React, Tailwind, and code Playground

by merhoo

HTML

<svg id="planet" height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="#123456" stroke-width="7" fill="#194878"/>
    </svg>

CSS

#planet {
  position: absolute;
  top: 25vh;
  left: 25vw;
  -webkit-animation: orbit 4s linear infinite; /* Chrome, Safari 5 */
  -moz-animation: orbit 4s linear infinite; /* Firefox 5-15 */
  -o-animation: orbit 4s linear infinite; /* Opera 12+ */
  animation: orbit 4s linear infinite; /* Chrome, Firefox 16+, IE 10+, Safari 5 */


}

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

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

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

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