css - 图像缩放和动画改进

Question

有人知道如何将 img 元素缩放(宽度)到屏幕的 100% 并保持动画的出色表现吗？

在我的第一个示例中，我将 width 属性设置为 100%。出于测试目的，我在这个 fiddle 中制作了一个动画循环以查看性能 block :http://jsfiddle.net/tXXmm/1/ .当图像被父元素的 overflow 隐藏时，我有 35fps。

当我删除 width 属性时，我有 60fps 到同一个例子:http://jsfiddle.net/tXXmm/2/

我需要知道是否有某种方法可以获得与第一个示例相同的结果，以及第二个示例的性能。请考虑:图像分辨率是可变的。只有父元素有 height: 500px;。此外，我的设计是流畅设计(这就是为什么我的图像宽度需要缩放屏幕的整个宽度)。

欢迎提供任何解决方案(PHP、JS、CSS...)。谢谢!

Answer 1

好的，我发现了一些东西。我添加了 transform: translateZ(0); 现在我在 Google Chrome 中获得了 60fps! http://jsfiddle.net/tXXmm/7/ .

似乎此属性强制在 webkit 浏览器中激活 GPU 加速。现在这似乎是一个很好的建议。感谢您的帮助!