html - 球没有正确滚动 CSS

Question

我的动画效果很好，但它似乎在滑动，似乎没有滚动。可能是什么问题？

在这里摆弄:http://jsfiddle.net/erkoda3m/2/

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(300px) rotate(360deg);
  }
  100% {
    -webkit-transform: translateX(0px) rotate(0deg);
  }
}
@keyframes roll {
  0% {
    transform: translateX(0px) rotate(0deg);
  }
  50% {
    transform: translateX(300px) rotate(360deg);
  }
  100% {
    transform: translateX(0px) rotate(0deg);
  }
}

<img src="http://i.imgur.com/5NvOwB5.png">

Answer 1

直径为150px，因此周长为150π = 471.24px。所以如果旋转 Angular 是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);
  }
}

<img src="http://i.imgur.com/5NvOwB5.png">

如果你想保持 translateX 不变并改变 rotate 值，你可以通过 (400/471.24)*360 计算 Angular > = 305.57deg

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(400px) rotate(305.57deg);
  }
  100% {
    -webkit-transform: translateX(0px) rotate(0deg);
  }
}
@keyframes roll {
  0% {
    transform: translateX(0px) rotate(0deg);
  }
  50% {
    transform: translateX(400px) rotate(305.57deg);
  }
  100% {
    transform: translateX(0px) rotate(0deg);
  }
}

<img src="http://i.imgur.com/5NvOwB5.png">