我有一个网页，里面有一个13秒的动画，涉及几个gif和png图像。按下按钮即可激活该过程。我遇到的问题是，在动画制作过程中，所有png图像的分辨率都会略有下降，然后在动画完成约1秒后重新聚焦。
我已经将代码细化为显示问题的相关部分（使用一些来自网络的随机图片和gif）。动画为5秒，当您按下"再次播放"时，上方的"Wordpress"徽标在动画过程中会失去分辨率。此外，当动画结束时，下部图片的大小会扩大，然后你可以看到它在大约一秒钟后重新获得焦点（这有点难看）。
你必须等待第一个动画结束，然后按"再次播放"才能看到这些事情中的任何一个发生。有人知道为什么会发生这种事吗？
http://jsfiddle.net/q7gCq/1/
补充：我花了一点时间才得到上面的例子，因为当我删除了太多代码时，问题就停止了。例如，当我删除背景渐变图像时，"Wordpress"图片会很快恢复分辨率，而动画仍在进行中。请参阅链接：
http://jsfiddle.net/hdWax/
为了优化速度，浏览器在动画完成之前不会进行任何调整大小的插值。
一旦图像静止了一段时间，浏览器就会通过插值重新渲染它们。你对此没有任何可靠的控制，不同的浏览器会做不同的事情。