示例链接:http: //jsfiddle.net/kArnq/1/
在 Webkit 中,文本动画完美。没有问题。
然而,在 Firefox 中,字符在滚动时会稍微晃动。也就是说,字符之间的空间在滚动时会稍微移动。
我的猜测是每个字符的计算位置是一个舍入问题,但我希望有办法解决它。
有什么想法吗?
/edit:这是正在发生的事情的动画 gif(当文本移动时会发生这种情况。我只是截取了两个屏幕截图并将它们覆盖,所以你可以看到我所看到的)。
示例链接:http: //jsfiddle.net/kArnq/1/
在 Webkit 中,文本动画完美。没有问题。
然而,在 Firefox 中,字符在滚动时会稍微晃动。也就是说,字符之间的空间在滚动时会稍微移动。
我的猜测是每个字符的计算位置是一个舍入问题,但我希望有办法解决它。
有什么想法吗?
/edit:这是正在发生的事情的动画 gif(当文本移动时会发生这种情况。我只是截取了两个屏幕截图并将它们覆盖,所以你可以看到我所看到的)。
我尝试使用变换,对我来说效果更好:
#foo b{
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-moz-animation-duration:10s;
-moz-animation-name: scroll;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-duration:10s;
-webkit-animation-name: scroll;
white-space: nowrap;
font-size: 6em;
display:block;
-moz-transform: translateX(0px);
}
@-moz-keyframes scroll {
0% {-moz-transform: translateX(0px);}
100% {-moz-transform: translateX(-620px);}
}
看看这个问题 改善 CSS3 过渡性能