Question

我知道has been asked before但我仍然不相信那里没有解决方法。我不相信的原因是因为我偶然设法将这些GIF动画保存在我的网站上。我在这里的聊天中发布了这个，在@CarrieKendall的帮助下提出了this fiddle。

这显然不是一个合适的解决方案，所以我想在这里发帖给你天才来分开并试图帮我弄清楚如何解决这个问题（最好不要太多资源）？ / p>

更新

好的，所以我用jsfiddle修改了一下并提出了this：

HTML

<img class="link" src="http://i.imgur.com/jsm0x2c.gif">
<img class="link" src="http://i.imgur.com/jsm0x2c.gif">
<img class="link" src="http://i.imgur.com/jsm0x2c.gif">

CSS

@-webkit-keyframes WIGGLE {
  0%   { -webkit-transform: translate(0px, 0px); }
  100%   { -webkit-transform: translate(0px, 0px); }
}

keyframes WIGGLE {
  0%   { -webkit-transform: translate(0px, 0px); }
  100%   { -webkit-transform: translate(0px, 0px); }
}

.link{
  -webkit-animation: WIGGLE 1ms; 
          animation: WIGGLE 1ms;
}

很奇怪，但它确实有效。绝对没有任何动画的动画。哦，我尝试用缩放比较替换翻译但是没有做到这一点。这是最纯粹的＆＃34;这种奇怪的错误/解决方案的形式。

尽管如此，我还不太满意。我喜欢它，如果一个比我更有知识的人可以看看这个，并试图找出真正发生的事情，这使得这个解决方法......工作。希望这里有一些可以使用的东西，虽然是以更优雅的方式。

另外，我不知道资源密集程度如何，就像上面的解决方法一样，所以如果有人可以帮助我衡量一下这是非常棒的。

Answer 1

桌面浏览器上不会出现相同的限制。这特定于Apple在其移动设备上滚动的实现。它是旧款移动设备的保留，以确保滚动保持平稳，因为早期的iPhone在整个操作系统中明智地使用了加速渲染。

触发硬件加速会更改页面的渲染路径。在非加速页面中，浏览器直接渲染到屏幕纹理。滚动时，所有其他执行都将停止，因为平滑滚动渲染器控制渲染。这不仅限于GIF。如果javascript会更改页面内容，则在页面完成滚动之前也不会显示在加速页面中，加速对象实际上被发送到合成器。合成器将所有对象层放在正确的位置，然后创建一个复合纹理以放在屏幕上。滚动实际上是合成器工作的一部分，由于合成器负责从端到端渲染，动画将继续。

不幸的是，由于Apple系统合成器的设计，实际上没有“正确的”权利。办法。事实上，由于Apple一直在对iOS进行更新，因此硬件加速的内容发生了变化，而且不会发生变化。例如，在iOS6中，preserve3d不再触发加速。据称，
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
应该仍然有效。在您的情况下，我相信它的工作原理是因为您使用的是关键帧。

在性能/资源影响方面，您的网页不会使用比任何其他加速页面更多的资源。

Answer 2

您是否尝试过-webkit-transform-style：preserve-3d;， - webkit-transform：translate3d（0,0,0）;或其他CSS选择器，可能会在动画中触发0％和100％的动画硬件加速，或者在iOS设备上触发.link类等...

从另一个类似问题的答案中阅读更多内容： - https://stackoverflow.com/a/10170170/1380685

.link{
  -webkit-animation: WIGGLE 1ms; 
          animation: WIGGLE 1ms;

  -webkit-transform-style: preserve-3d;
  -webkit-transform: translate3d(0,0,0);
}

解决方案是给出“位置：亲戚; z-index：1000;显示：阻止“css属性到整个容器拥有scroll元素，没有必要给translate3d 儿童元素。

参考网址

虽然看起来是其他人遇到的问题：

如果你可以侥幸成功，你可以使用下面的老派技术让动画持续存在，资源密集度较低的操作

您始终可以在初始加载的CSS文件中使用Base64编码资产技术。

我最近发布了另一个问题，最近提出了一些问题。这样，动画是连续的，预加载和缓存，以便通过css轻松快速地调用。您还可以使用SVG，PNF，JPG和许多其他图像格式进行缩放和重新调整大小。

请阅读以下链接中发布的信息，了解更多相关信息。

如何在iOS设备上滚动时保持动画GIF动画？

更新

2 个答案: