Firefox 和 CSS3 动画 - 为啥我的文本会抖动？

Posted 2023-03-06

【中文标题】Firefox 和 CSS3 动画 - 为啥我的文本会抖动？

【英文标题】：Firefox and CSS3 Animations - Why is my text wobbling?Firefox 和 CSS3 动画 - 为什么我的文本会抖动？

【发布时间】：2012-09-16 08:50:28

【问题描述】：

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

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

不过，在 Firefox 中，字符在滚动时会稍微晃动。也就是说，字符之间的空间在滚动时会稍微移动。

我的猜测是每个字符的计算位置存在舍入问题，但我希望有办法解决。

有什么想法吗？

/edit：这是正在发生的事情的动画 gif（当文本移动时会发生这种情况。我只是截取了两张屏幕截图并将它们重叠，这样你就可以看到我所看到的）。

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

【问题讨论】：

晃动……就像轻微的水平抽动一样，好像有什么东西让字母在很短的时间内停止了？

差不多，但不完全。更像是字母在滚动时相对于彼此移动位置。就像他们的字距调整（基本上，对于任何不知道的人来说，字母间距）正在略有变化。 “Jiggle”是我能想到的视觉效果最好的词。 “摇晃”，也许吧？

添加了一个动画 gif 来帮助解释。

明白了。我在 FF15.0.1 上没有看到。动画中有打嗝，但没有角色间的抖动。

继 Marc B 的评论之后，动画打嗝就消失了。尝试将 FF 更新到最新版本（无论如何，它都有很酷的新功能，你会喜欢的）。

【参考方案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