图像在动画期间失去分辨率

Question

我有一个13秒动画的网页，涉及多个gif和png图像。按下按钮即可激活该过程。我遇到的问题是，在动画过程中，所有png图像都会略微失去分辨率，然后在动画结束后大约1秒后重新聚焦。

我已经将代码稀释到显示问题的相关部分（使用来自网络的一些随机图片和GIF）。动画是5秒，当您按“再次播放”时，上部“Wordpress”徽标在动画期间失去分辨率。此外，当动画结束时，较低的图片会扩大尺寸，然后您可以看到它在一秒钟之后重新获得焦点（这有点难以看到）。

您必须等待第一个动画结束，然后按“再次播放”以查看这些事情中的任何一个。有谁知道为什么会这样？

http://jsfiddle.net/q7gCq/1/

要添加：获取上述示例需要一段时间，因为当我删除了太多代码时，问题就停止了。例如，当我删除背景渐变图像时，“Wordpress”图片可以非常快速地重新获得分辨率，同时动画仍在进行中。见链接：

http://jsfiddle.net/hdWax/

Answer 1

要优化速度，浏览器不会进行任何插值以调整大小，直到动画完成后。

一旦图像静止不动，浏览器就会用插值重新渲染它们。您没有对此进行任何可靠的控制，不同的浏览器将采用不同的方式。