html - 图像在动画过程中失去分辨率

Question

我有一个包含几个 gif 和 png 图像的 13 秒动画网页。按下按钮即可激活该过程。我遇到的问题是，在动画期间，所有 png 图像的分辨率都略有下降，然后在动画结束后约 1 秒重新聚焦。

我已将代码精简为显示问题的相关部分(使用来自网络的一些随机图片和 gif)。动画时长 5 秒，当您按下“再次播放”时，上方的“Wordpress” Logo 在动画期间失去分辨率。此外，当动画结束时，下面的图片会扩大尺寸，然后您可以看到它在大约一秒钟后重新获得焦点(这有点难看)。

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

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

要补充:得到上面的例子花了一点时间，因为当我删除了太多代码时，问题就停止了。例如，当我删除背景渐变图像时，“Wordpress”图片会很快恢复分辨率，而动画仍在进行中。查看链接:

http://jsfiddle.net/hdWax/

Answer 1

为了优化速度，您的浏览器在动画完成之前不会为调整大小进行任何插值。

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