图像比例和动画改进

Question

有人可以知道屏幕的缩放（宽度）到100％img元素并在动画中保持很好的表现吗？

在我的第一个示例中，我将width属性设置为100%。出于测试目的，我在这个小提琴中制作了一个动画循环，以查看性能块：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加速。这似乎是一个很好的提示。谢谢你的帮助！