我正在研究基于CSS3的动画，其中我有一个以线性渐变为背景的div，然后我使用PNG作为掩码使用-webkit-mask-image属性 .
为了使其动画，我想将渐变顶部的蒙版移动 . 它工作正常，看起来华丽，但我的问题是它有点杀死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);
关于如何优化它的任何想法？
1 回答
正如Rich Bradshaw指出的那样，我认为你会发现它并没有得到很好的优化 . 但是要实现类似的效果，您可以创建一个动画GIF，将画布大小加倍，然后在画布另一半的每一帧上放置一个静态版本的GIF . 这样，动画总是在后台无形地播放，只要你想要显示动画版本，就可以通过改变图像的位置来切换到它 .
此技术的一个问题是，当您触发动画时，动画不一定会从头开始 . 这可能对您的特定动画很重要，也可能不重要 .