css - 图像缩放和动画改进

Question

有人可以知道如何将元素缩放（宽度）到屏幕的 100%img并在动画中保持出色的表现吗？

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

当我删除该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 加速。这似乎是一个很好的建议。谢谢您的帮助！