.container{
  position: relative;
  top: 100px;
  margin : 0 auto;
  width: 300px;
}
.first{
  position: relative;
  top: 0px;
  left: 0px;
}
.second{
  position: relative;
  top: 0px;
  left: 100px;
}
.third{
  position: relative;
  top: 0px;
  left: 200px;
}
.four{
  position: relative;
  top: 100px;
  left: 0px;
}
.five{
  position: relative;
  top: 100px;
  left: 100px;
}
.six{
  position: relative;
  top: 100px;
  left: 200px;
}
.seven{
  position: relative;
  top: 200px;
  left: 0px;
}
.eighth{
  position: relative;
  top: 200px;
  left: 100px;
}
.ninth{
  position: relative;
  top: 200px;
  left: 200px;
}
.circle{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100px;
  height: 100px;
 }
.n1{
  background: #000;
  animation: spin1 2s cubic-bezier(.17,.67,.99,.04) infinite;
  opacity: 0.2;
}
.n2{
  background: #fff;
  animation: spin2 2s cubic-bezier(.17,.67,.99,.04) infinite;
}

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