图像比例和动画改进 [英] Image scale and animation improvement

问题描述

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

在我的第一个例子中，我将 width 属性设置为 100％。出于测试目的，我在这个小提琴中制作了一个动画循环，以查看性能块：。

看来这个属性强制在webkit浏览器中激活GPU加速。这似乎是一个很好的提示。谢谢你的帮助！

Can someone know how scale (width) to 100% of the screen a img element and keep big performances in animation ?

In my first example, i set the width property to 100%. For testing purpose i made a animation loop in this fiddle to see performance chunk : http://jsfiddle.net/tXXmm/1/. I have 35fps when the image is hidden by the overflow of the parent element.

When i remove the width property, i have 60fps to the same example : http://jsfiddle.net/tXXmm/2/

I need to know if there is some methodology to get the same result as the first example, with the performance of the second example. Please consider : The image resolution is variable. Only the parent element has height: 500px;. Also, my design is a fluid design (this is why the width of my image needs to scale the full width of the screen).

Any solutions is appreciated (PHP, JS, CSS...). Thank you!

解决方案

Ok, I found something. I have added transform: translateZ(0); and now i got 60fps in Google Chrome! http://jsfiddle.net/tXXmm/7/.

It appears this property force the activation of GPU Acceleration in webkit browsers. It's seems to be a good tip to go for now. Thank you for your help!

这篇关于图像比例和动画改进的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！