Question

示例链接：http://jsfiddle.net/kArnq/1/

在Webkit中，文本动画完美。没有问题。

但是在Firefox中，角色在滚动时会略微摇晃。也就是说，字符之间的空格随着它们的滚动而略微移动。

我的猜测是，这是每个角色的计算位置的舍入问题，但我希望有一种解决方法。

有什么想法吗？

/ edit：这是一个动画的GIF动画（当文本移动时会发生这种情况。我只是拍了两张截图并叠加了它们，所以你可以看到我所看到的内容。）

http://i.imgur.com/bij8A.gif

Answer 1

我尝试使用变换，对我来说效果更好：

#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);}
}

看看这个问题 Improving CSS3 transition performance

Firefox和CSS3动画 - 为什么我的文字摇摆不定？

1 个答案: