<div class="sphere"></div>

html, body {
  font-size: 20px;
}

.sphere {
  border: 0rem solid gray; 
  width: 10rem; 
  height: 10rem; 
  /*margin: 2rem auto;*/
  border-radius: 50%;
  /*影*/
  box-shadow: inset -1rem -1rem 5rem gray;
  /* anime */
  animation: rotation 4s linear alternate infinite;
  -webkit-animation: rotation 4s linear alternate infinite;
}
	
@keyframes rotation{
  0%, 5% {
    transform: 
      translateX(0rem)
      rotate(0deg);
  }
  95%, 100% {
    transform: 
      translateX(40rem)
      rotate(360deg);
  }
}
@-webkit-keyframes rotation{
  0%, 5% {
    transform: 
      translateX(0rem)
      rotate(0deg);
  }
  95%, 100% {
    transform: 
      translateX(40rem)
      rotate(360deg);
  }
}