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

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

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