CSS 动画缓慢而缓慢 - CPU 性能？答案

【问题标题】：CSS Animation Sluggish and Slow - CPU Performance?CSS 动画缓慢而缓慢 - CPU 性能？
【发布时间】：2015-02-18 06:05:58
【问题描述】：

我正在使用 css 动画，但在某些页面上似乎有点迟钝，我相信是由于 CPU 使用率。

.test {
left:50%;
position:relative;
overflow:hidden;
animation: waitandhide2 2.2s 0s, show2 2.2s 2.2s;
-webkit-animation: waitandhide2 2.2s 0s, show2 2.2s 2.2s;
-moz-animation: waitandhide2 2.2s 0s, show2 2.2s 2.2s;
animation-timing-function: ease-in-out;
-moz-animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
z-index:5;
}

@keyframes waitandhide2 {
    from { left:50%; opacity:1; }
    to { left:-105%; opacity:1; }
}
@keyframes show2 {
    from { left:105%; opacity:1; }
    to { left:50%; opacity:1; }
}
@-webkit-keyframes waitandhide2 {
    from { left:50%; opacity:1; }
    to { left:-105%; opacity:1; }
}
@-webkit-keyframes show2 {
    from { left:105%; opacity:1; }
    to { left:50%; opacity:1; }
}
@-moz-keyframes waitandhide2 {
    from { left:50%; opacity:1; }
    to { left:-105%; opacity:1; }
}
@-moz-keyframes show2 {
    from { left:105%; opacity:1; }
    to { left:50%; opacity:1; }
}

我在某处读到，您可以使用 -webkit-transform 解决此问题： translate3d(0, 0%, 0);我不知道如何在这种情况下执行此操作。

感谢任何帮助。

【问题讨论】：

CSS3 动画是硬件加速的，应该使用 GPU，而不是 CPU。也许如果你能提供一个小提琴，其他用户可以测试并告诉你动画是否在他们的机器上流畅。
当它试图在页面加载时运行时，这似乎是一个更大的问题。重复动画运行顺利，当没有其他加载时，我在初始加载时延迟了 css 动画，现在似乎没问题。

标签： jquery css animation css-animations

【解决方案1】：

不是为left:% 设置动画，而是为translate: transform(%) 设置动画。添加-webkit-transform: translate3d(0, 0%, 0) 和动画元素将创建一个单独的层，并可能有助于提高性能。然而，这是一个 hack，您应该为此使用 will-change 适当性。

【讨论】：

【解决方案2】：

我已通过延迟动画加载来纠正此问题。

当它试图在页面加载时运行，而页面正在下载许多其他元素和图像时，这似乎是一个更大的问题。

在较大的页面上更明显，这是有道理的。谢谢。

【讨论】：