我正在处理基于 CSS3 的动画,其中我有一个具有线性渐变作为背景的 div,然后我使用 -webkit-mask-image 属性使用 PNG 作为蒙版。
为了使其具有动画效果,我想将蒙版移动到渐变顶部。它工作正常,看起来很漂亮,但我的问题是它有点杀死 CPU。
这是动画:
@keyframes moveMask {
0% { -webkit-mask-position: 0px 0px;}
100% { -webkit-mask-position: 2000px 0px; }
}
我用这个来称呼它:
animation: moveMask 200s linear infinite alternate;
我尝试添加以下技巧,但它没有改变任何东西:
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
关于如何优化它的任何想法?