Question

我正在使用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）;我不知道在这种情况下如何做到这一点。

感谢任何帮助。

Answer 1

我已经通过延迟动画onload来纠正了这个问题。

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

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

Answer 2

不是动画left:%适当的动画，而是动画translate: transform(%)。添加-webkit-transform: translate3d(0, 0%, 0)和动画元素将创建一个单独的图层，可能有助于提高性能。然而，这是一个黑客，你应该使用意志改变这一点。

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

2 个答案: