球没有正确滚动 CSS
Ball not rolling properly CSS
我的动画效果很好,但它似乎在滑动,似乎没有滚动。可能是什么问题?
FIDDLE 此处: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">
直径为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);
}
}
<img src="http://i.imgur.com/5NvOwB5.png">
如果你想保持translateX
不变并改变rotate
值,你可以通过(400/471.24)*360
= 305.57deg[=39=来计算角度]
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">
我的动画效果很好,但它似乎在滑动,似乎没有滚动。可能是什么问题?
FIDDLE 此处: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">
直径为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);
}
}
<img src="http://i.imgur.com/5NvOwB5.png">
如果你想保持translateX
不变并改变rotate
值,你可以通过(400/471.24)*360
= 305.57deg[=39=来计算角度]
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">