有人知道如何将 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...)。 谢谢!
最佳答案
好的,我发现了一些东西。我添加了 transform: translateZ(0);
现在我在 Google Chrome 中获得了 60fps! http://jsfiddle.net/tXXmm/7/ .
似乎此属性强制在 webkit 浏览器中激活 GPU 加速。现在这似乎是一个很好的建议。感谢您的帮助!
关于css - 图像缩放和动画改进,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17477064/