jquery - CSS动画缓慢且缓慢-CPU性能？

我正在使用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）;我不知道在这种情况下如何执行此操作。

任何帮助表示赞赏。

最佳答案

代替对left:%的适当性进行动画处理，对translate: transform(%)进行动画处理。
添加-webkit-transform: translate3d(0, 0%, 0)和动画元素将创建一个单独的图层，可能有助于提高性能。但是，这是一个技巧，您应该为此使用意志变更的适当性。

关于jquery - CSS动画缓慢且缓慢-CPU性能？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28571140/