html{
  background:#000;
  overflow:hidden;
}

.dot{
  border-radius:50%;
  height:40px;
  width:40px;
  position:absolute;
}
#hold{
  position:absolute;
  left:50%;
  top:50%;
  width:280px;
  animation: rotate 4s linear infinite;
  transform-origin:0 0;
}

.dot:nth-child(odd){
  background:white;
}
.dot:nth-child(even){
  background:black;
}

@keyframes osc{
  0%{left:-20px;}
  50%{left:20px;}
  100%{left:-20px;}
}

@keyframes rainbow{
  0%{background:hsla(0,90%,50%,1);}
  25%{background:hsla(90,90%,50%,1);}
  50%{background:hsla(180,90%,50%,1);}
  75%{background:hsla(270,90%,50%,1);}
  100%{background:hsla(360,90%,50%,1);}
}

@keyframes rotate{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}