.wrap {

  div {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 2px dotted #F00;
    border-radius: 50%;
    animation: aro 7s cubic-bezier(0.765, 0.855, 1.000, -0.205) alternate infinite;
  }

  div:nth-child(2)  { animation-delay: 0.05s; transform: rotateY(22.5deg); }
  div:nth-child(3)  { animation-delay: 0.10s; transform: rotateY(45deg); }
  div:nth-child(4)  { animation-delay: 0.15s; transform: rotateY(67.5deg); }
  div:nth-child(5)  { animation-delay: 0.20s; transform: rotateY(90deg); }
  div:nth-child(6)  { animation-delay: 0.25s; transform: rotateY(112.5deg); }
  div:nth-child(7)  { animation-delay: 0.30s; transform: rotateY(135deg); }
  div:nth-child(8)  { animation-delay: 0.35s; transform: rotateY(157.5deg); }

  div:nth-child(9)  { animation-delay: 0.40s; transform: rotateX(22.5deg); }
  div:nth-child(10) { animation-delay: 0.45s; transform: rotateX(45deg); }
  div:nth-child(11) { animation-delay: 0.50s; transform: rotateX(67.5deg); }
  div:nth-child(12) { animation-delay: 0.55s; transform: rotateX(90deg); }
  div:nth-child(13) { animation-delay: 0.60s; transform: rotateX(112.5deg); }
  div:nth-child(14) { animation-delay: 0.65s; transform: rotateX(135deg); }
  div:nth-child(15) { animation-delay: 0.70s; transform: rotateX(157.5deg); }

  div:nth-child(16) { animation-delay: 0.75s; transform: rotateX(90deg) rotateY(22.5deg); }
  div:nth-child(17) { animation-delay: 0.80s; transform: rotateX(90deg) rotateY(45deg); }
  div:nth-child(18) { animation-delay: 0.85s; transform: rotateX(90deg) rotateY(67.5deg); }
  div:nth-child(19) { animation-delay: 0.90s; transform: rotateX(90deg) rotateY(90deg); }
  div:nth-child(20) { animation-delay: 0.95s; transform: rotateX(90deg) rotateY(112.5deg); }
  div:nth-child(21) { animation-delay: 1.00s; transform: rotateX(90deg) rotateY(135deg); }
  div:nth-child(22) { animation-delay: 1.05s; transform: rotateX(90deg) rotateY(157.5deg); }

  animation: rotate 123s linear infinite;
}
@keyframes rotate {
  0% { transform: rotateX(0) rotateY(0deg) scale3d(1,1,1) rotateZ(0deg); }
  8% { transform: rotateY(90deg) scale3d(0.96,0.96,0.96) rotateZ(70deg); }
  16% { transform: rotateY(180deg) scale3d(1,1,1) rotateZ(110deg); }
  25% { transform: rotateY(270deg) scale3d(0.98,0.98,0.98) rotateZ(190deg); }
  33% { transform: rotateY(360deg) scale3d(0.96,0.96,0.96) rotateZ(230deg); }
  41% { transform: rotateY(450deg) scale3d(1,1,1) rotateZ(310deg); }
  50% { transform: rotateY(540deg) scale3d(0.98,0.98,0.98) rotateZ(350deg); }
  58% { transform: rotateY(630deg) scale3d(0.96,0.96,0.96) rotateZ(430deg); }
  66% { transform: rotateY(720deg) scale3d(1,1,1) rotateZ(470deg); }
  75% { transform: rotateY(810deg) scale3d(1,1,1) rotateZ(530deg); }
  83% { transform: rotateY(900deg) scale3d(0.99,0.99,0.99) rotateZ(610deg); }
  91% { transform: rotateY(990deg) scale3d(0.97,0.97,0.97) rotateZ(650deg); }
  100% { transform: rotateX(360deg) rotateY(1080deg) scale3d(1,1,1) rotateZ(720deg); }
}
@keyframes aro {
  100%  { transform: scale(0.6); }
}