JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="container">
    <div class="container">
  <div class="some-class">
    <div class='orbit'>
        <img class="img-orbit img-orbit2" src="http://lorempixel.com/200/200/" class=" img-responsive center-block">
        <img class="img-orbit img-orbit4" src="http://lorempixel.com/200/200/" class=" img-responsive center-block">
     </div>
    </div>
 </div>
 </div>

CSS

.orbit{
  text-align: center;
  color: black;
  padding-bottom: 99%;
  position: relative;
  border: 3px solid black;
  border-radius: 50%;
    
  -webkit-animation: spin-right 60s linear infinite;
     -moz-animation: spin-right 60s linear infinite;
      -ms-animation: spin-right 60s linear infinite;
       -o-animation: spin-right 60s linear infinite;
          animation: spin-right 60s linear infinite; /* change here from 60s to 1s*/
    
}

/* small circles */
.img-orbit{
    position: absolute;
    border: 2px solid black;
    width: 40%;
    border-radius: 50%;
    box-shadow: 0 0 34px blue;
    -webkit-animation: spin-left 60s linear infinite;
     -moz-animation: spin-left 60s linear infinite;
      -ms-animation: spin-left 60s linear infinite;
       -o-animation: spin-left 60s linear infinite;
          animation: spin-left 120s linear infinite;
}

.img-orbit2{
    top: 30%;
    left: -20%;
}
.img-orbit4{
    top: 30%;
    right: -20%;
}

.some-class{
    width: 50%;
    margin: auto;
}

@-webkit-keyframes spin-right {
  100% {
    -webkit-transform: rotate(360deg);
       -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
         -o-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes spin-right {
  100% {
    -webkit-transform: rotate(360deg);
       -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
         -o-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@-webkit-keyframes spin-left {
  100% {
    -webkit-transform: rotate(-360deg);
       -moz-transform: rotate(-360deg);
        -ms-transform: rotate(-360deg);
         -o-transform: rotate(-360deg);
            transform: rotate(-360deg);
  }
}

@keyframes spin-left {
  100% {
    -webkit-transform: rotate(-360deg);
       -moz-transform: rotate(-360deg);
        -ms-transform: rotate(-360deg);
         -o-transform: rotate(-360deg);
            transform: rotate(-360deg);
  }
}