动画期间图像失去分辨率答案

【问题标题】：images lose resolution during animation动画期间图像失去分辨率
【发布时间】：2012-09-11 12:59:14
【问题描述】：

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

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

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

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

【问题讨论】：

标签： html css

【解决方案1】：

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

一旦图像静止一段时间，浏览器就会使用插值重新渲染它们。您对此没有任何可靠的控制权，不同的浏览器会以不同的方式执行此操作。

【讨论】：

补充一点：这可能不仅适用于不同的浏览器，也适用于不同的硬件 (GPU) 设置。
@JayC，好电话。如果浏览器使用硬件加速和/或 OpenGL 或 DirectX 等库，这肯定是真的。
没有修复绝对是太糟糕了。
@gmath，不，不是。任何一天我都会在插值和抗锯齿上制作平滑的动画。没有魔法。总是有取舍。您网站上的大部分用户甚至都不会注意到，但他们肯定会注意到笨拙的动画。