仅在 Firefox 4 中的平滑动画答案

【问题标题】：smooth animation only in firefox 4仅在 Firefox 4 中的平滑动画
【发布时间】：2011-07-22 12:46:18
【问题描述】：

似乎 jsfiddle 上的以下设置仅在 firefox 4 中运行顺畅。 http://jsfiddle.net/ynytc/39/

我想知道为什么？我想可能是因为 Firefox 4 中的硬件加速，但没有它仍然运行顺利。

所以也许有人知道为什么？

编辑：与 chrome、safari、ie8 相比

【问题讨论】：

【解决方案1】：

您在 10 秒的时间段内制作动画，大小变化仅为 20 像素。这意味着每 1/2 秒只会有一个整体维度变化，这正是我在 Chrome 中看到的。图像的大小不能设置为像素的分数（在所有浏览器中）。然而，Firefox 4 似乎允许这样做；无论如何，这是我唯一能想到的。

如果你改变你的小提琴like this，你会看到 Chrome 正在尽可能快地运行动画，但图像只有在属性值（宽度和高度）发生整数变化时才会移动.

【讨论】：

【解决方案2】：

这是一个有趣的副作用，我以前没有遇到过。

似乎其他浏览器无法应用亚像素缩放，因此您只有 20 像素可以在 10 秒内传播，达到每秒 2 帧的荣耀。解决方法是应用 CSS 过渡（如果您不需要支持 IE）。

在此处查看 CSS 过渡示例： http://jsfiddle.net/nKfdB/

【讨论】：