.spin { 
    transform-origin: center center;
    transform-box: fill-box;
    animation: rotate 4s infinite 0s linear; 
}

.spin2 { 
    transform-origin: center center;
    transform-box: fill-box;
    animation: rotateReverse 5s infinite 0s linear; 
}

@keyframes rotate {
    0%   { transform: translate(0px, 0px); }
    50%  { transform: translate(0px, 20px); }
    100% { transform: translate(0px, 0px); }
  }

  @keyframes rotateReverse {
    0%   { transform: translate(0px, 10px); }
    50%  { transform: translate(0px, 0px); }
    100% { transform: translate(0px, 10px); }
  }