球没有正确滚动CSS

直径为150px,因此周长为150π = 471.24px.因此,如果旋转角度为360°,则translateX值将为球的周长,或471.24px:

img {
  height: 150px;
  width: 150px;
  animation: roll 4s linear infinite;
  -webkit-animation: roll 4s linear infinite;
}
@-webkit-keyframes roll {
  0% {
    -webkit-transform: translateX(0px) rotate(0deg);
  }
  50% {
    -webkit-transform: translateX(471.24px) rotate(360deg);
  }
  100% {
    -webkit-transform: translateX(0px) rotate(0deg);
  }
}
@keyframes roll {
  0% {
    transform: translateX(0px) rotate(0deg);
  }
  50% {
    transform: translateX(471.24px) rotate(360deg);
  }
  100% {
    transform: translateX(0px) rotate(0deg);
  }
}