问题:为什么我的 CPU在应用模糊时会记录~30%而在动画对象上未应用模糊时会记录~6% ?
细节:
我在页面上有一组随机生成的项目,这些项目分配了一个 CSS 动画(在 CSS 文件中),并随机生成了宽度、高度的值,重要的是,模糊应用内联。
CSS 文件样式如下所示:
animation-name: rise;
animation-fill-mode: forwards;
animation-timing-function: linear;
animation-iteration-count: 1;
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
-webkit-transform: translate3d(0,0,0);
transform: translateZ(0);
宽度、高度和模糊通过style
属性内联应用。
<div class="foo" style="width:99px;height:99px;
filter:blur(2px);
-webkit-filter:blur(2px) opacity(0.918866247870028);
-moz-filter:blur(2px) opacity(0.918866247870028);
-o-filter:blur(2px) opacity(0.918866247870028);
-ms-filter:blur(2px) opacity(0.918866247870028);"></div>
启用模糊后,我的 CPU 使用率约为 30%。当我禁用模糊时,CPU 使用率下降到 ~6%。
这里发生了什么事?chrome 是否只能在不应用模糊时进行 GPU 加速?如果是这样,为什么?
更新1:
动画rise
如下所示:
@keyframes rise {
0% {
transform: translateY(0px);
}
100% {
transform: translateY(-1000px);
}
}