CSS 动画缓慢且缓慢 - CPU 性能?
CSS Animation Sluggish and Slow - CPU Performance?
我正在使用 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)
和动画元素将创建一个单独的层,可能有助于提高性能。然而,这是一个 hack,你应该为此使用 will-change propriety。
我正在使用 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)
和动画元素将创建一个单独的层,可能有助于提高性能。然而,这是一个 hack,你应该为此使用 will-change propriety。