css – transform:在所有版本的firefox中扩展速度都非常慢

前端之家收集整理的这篇文章主要介绍了css – transform:在所有版本的firefox中扩展速度都非常慢前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

请检查一下:

http://users.telenet.be/prullen/grid.html

这在safari中具有正常速度,但在Firefox中缩放效果非常慢.

有趣的是,如果我添加

.item {
      width:100px;
      height:100px;
}

它似乎加速了一点(仍然不完全流利).但这不是我的图像的大小,所以它看起来搞砸了:

http://users.telenet.be/prullen/grid2.html

如果我将项目宽度/高度设置为我的图像大小,则事情会再次减慢:

.item {
      width:160px;
      height:160px;
}

http://users.telenet.be/prullen/grid3.html

任何想法,因为这是什么原因?我没有想法,我删除/添加了陈述,但似乎没有任何帮助.这是在不同版本10的firefox版本中测试的.

谢谢,
韦斯利

最佳答案
为了增强动画效果,可以从#container .item .thumbnail中删除Box-shadow属性,此属性很重,会减慢动画效果.
但是如果你仍然想要阴影效果,你可以尝试把它作为背景而不是作为动画的一部分.

它应该进行一些更改,但从动画div中删除Box-shadow属性会使它更快. “项目缩放”div是负责动画的div.通过从“item”类拆分“zoom”类,并在每个类上应用正确的css属性,动画应该更快. (我用firebug尝试过)

HTML:

猜你在找的CSS相关文章