Question

请检查：

这在safari中具有正常速度，但在firefox中缩放效果非常慢。

有趣的是，如果我添加：

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

它似乎加速了一点（仍然不完全流利）。但这不是我的图像所在的尺寸，所以看起来很混乱：

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

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

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

谢谢，韦斯利

Answer 1

要提升动画效果，可以从box-shadow中移除#container .item .thumbnail属性，此属性很重，会减慢动画效果。
但是如果你仍然想要阴影效果，你可以尝试把它作为背景而不是动画的一部分。

应该进行一些更改，但从动画div中删除box-shadow属性会使其更快。 “项目缩放”div是负责动画的div。通过从“item”类拆分“zoom”类，并在每个类上应用正确的css属性，动画应该更快。（我用萤火虫尝试过它）

HTML：

<div class="item">
  <div class="zoom">
    <div class="thumbnail">
        <img src="...">
    </div>
  </div>
</div>

Answer 2

绝对定位元素，使它们不属于文档的正常流程。这将使浏览器不会在每次动画播放时都尝试重绘页面。

当元素相对定位时，它们会在更改元素时影响彼此，因此必须重新绘制它们以确保更改一个元素不会影响所有元素。

我创建了一个演示并且绝对定位了元素，你可以看到动画效率更高。