CSS3动画有几个孩子的整页容器导致滞后

Question

每当我尝试为我的容器设置动画时（如下所述），我经常会遇到容器的一些滞后（如不稳定的移动）。我进行了一些重新搜索并尝试了一些东西，但还没有找到解决方案。 我发现的唯一一件事是，如果我删除除一张以外的所有图片，一切都会顺利进行。

因此，通过消除所有图像，只保留一张，即可解决问题。但我需要所有的图像.. 功能实际上是幻灯片（图像的常规淡入淡出过渡）。

请查看我的设置，如果我在这里做任何坏事，请注意我（目前仅适用于 WebKit）：

<div id="container">
    <div id="inner">
        <div class="image"></div>
        <div class="image"></div>
        <div class="image"></div>
        [...]
    </div>
</div>

使用 CSS：

#container {
    width:100%;
    height:100%
    position:absolute; 
    -webkit-transform: translate3d(0,0,0); 
    -webkit-transition: -webkit-transform 800ms linear;
    -webkit-backface-visibility: hidden;
    -webkit-transform-style: preserve-3d; /* *should* improve performance? */
}
#inner {
    position:relative;
    width:100%;
    height:100%;
}
.image {
    position:absolute;
    left:0;
    top:0;
    background-image:[something];
    width:100%; 
    height:100%; 
    background-size:cover;
}

然后我只是在我的代码中做一些这样的事情来让容器移动

$('#container').css('-webkit-transform', 'translate3d(0,500px,0)');

提前致谢！

编辑：Here's a fiddle btw（请记住，这里的结果窗口非常小，这给了我很好的平滑度。但在全屏时，它有点不稳定）

EDIT2：修复了损坏的小提琴！

Answer 1

在这种情况下，您可能会遇到延迟，因为您正在移动包含所有图像的容器（并且这些图像很大）。浏览器需要为每个改变位置的 DOM 元素计算新的位置，并在动画的所有步骤中移动它（这意味着重新绘制所有这些大图像）。

如果你只移动一个带有图像的 DOM 元素，动画应该是平滑的：

$('.image').css('-webkit-transform', 'translate3d(0,500px,0)');

这里有一个fsfidde，它只移动一个 DOM 元素。

Answer 2

在这种情况下，动画滞后通常是由于过载。也许你应该预加载一些图片。

就像显示的那样here

以及完整的手册here