.circles-ilusion {
  width: 300px;
  height: 300px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -150px;
  margin-top: -150px;
  z-index: 1;
  background-color: #f7cc1f;
  border-radius: 50%;
}
.circles-ilusion div {
  width: 400px;
  height: 2px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -200px;
  margin-top: -1px;
  background-color: #000;
}
.circles-ilusion div:before {
  display: block;
  content: '';
  width: 30px;
  height: 30px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -15px;
  margin-top: -15px;
  background-color: blue;
  border-radius: 50%;
  -webkit-animation: circlesIlusion 1s ease-in-out infinite alternate;
          animation: circlesIlusion 1s ease-in-out infinite alternate;
}
.circles-ilusion div:nth-child(1) {
  -webkit-transform: rotate(18deg);
      -ms-transform: rotate(18deg);
          transform: rotate(18deg);
}
.circles-ilusion div:nth-child(1):before {
  -webkit-animation-delay: 0.10011s;
          animation-delay: 0.10011s;
}
.circles-ilusion div:nth-child(2) {
  -webkit-transform: rotate(36deg);
      -ms-transform: rotate(36deg);
          transform: rotate(36deg);
}
.circles-ilusion div:nth-child(2):before {
  -webkit-animation-delay: 0.20022s;
          animation-delay: 0.20022s;
}
.circles-ilusion div:nth-child(3) {
  -webkit-transform: rotate(54deg);
      -ms-transform: rotate(54deg);
          transform: rotate(54deg);
}
.circles-ilusion div:nth-child(3):before {
  -webkit-animation-delay: 0.30033s;
          animation-delay: 0.30033s;
}
.circles-ilusion div:nth-child(4) {
  -webkit-transform: rotate(72deg);
      -ms-transform: rotate(72deg);
          transform: rotate(72deg);
}
.circles-ilusion div:nth-child(4):before {
  -webkit-animation-delay: 0.40044s;
          animation-delay: 0.40044s;
}
.circles-ilusion div:nth-child(5) {
  -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
          transform: rotate(90deg);
}
.circles-ilusion div:nth-child(5):before {
  -webkit-animation-delay: 0.50056s;
          animation-delay: 0.50056s;
}
.circles-ilusion div:nth-child(6) {
  -webkit-transform: rotate(108deg);
      -ms-transform: rotate(108deg);
          transform: rotate(108deg);
}
.circles-ilusion div:nth-child(6):before {
  -webkit-animation-delay: 0.60067s;
          animation-delay: 0.60067s;
}
.circles-ilusion div:nth-child(7) {
  -webkit-transform: rotate(126deg);
      -ms-transform: rotate(126deg);
          transform: rotate(126deg);
}
.circles-ilusion div:nth-child(7):before {
  -webkit-animation-delay: 0.70078s;
          animation-delay: 0.70078s;
}
.circles-ilusion div:nth-child(8) {
  -webkit-transform: rotate(144deg);
      -ms-transform: rotate(144deg);
          transform: rotate(144deg);
}
.circles-ilusion div:nth-child(8):before {
  -webkit-animation-delay: 0.80089s;
          animation-delay: 0.80089s;
}
.circles-ilusion div:nth-child(9) {
  -webkit-transform: rotate(162deg);
      -ms-transform: rotate(162deg);
          transform: rotate(162deg);
}
.circles-ilusion div:nth-child(9):before {
  -webkit-animation-delay: 0.901s;
          animation-delay: 0.901s;
}
.circles-ilusion div:nth-child(10) {
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
}
.circles-ilusion div:nth-child(10):before {
  -webkit-animation-delay: 1.00111s;
          animation-delay: 1.00111s;
}
.circles-ilusion div:last-child:before {
  background: red;
}

@-webkit-keyframes circlesIlusion {
  0% {
    -webkit-transform: translateX(-150px);
            transform: translateX(-150px);
  }
  100% {
    -webkit-transform: translateX(150px);
            transform: translateX(150px);
  }
}

@keyframes circlesIlusion {
  0% {
    -webkit-transform: translateX(-150px);
            transform: translateX(-150px);
  }
  100% {
    -webkit-transform: translateX(150px);
            transform: translateX(150px);
  }
}