优化使用CSS掩码的CSS3动画

Question

我正在研究基于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);

关于如何优化它的任何想法？

Answer 1

Rich Bradshaw指出，我认为你会发现它的优化程度不高。但是要实现类似的效果，您可以创建一个动画GIF，将画布大小加倍，然后在画布另一半的每一帧上放置一个静态版本的GIF。这样，动画总是在后台无形地播放，只要你想要显示动画版本，就可以通过改变图像的位置来切换到它。

此技术的一个问题是，当您触发动画时，动画不一定会从头开始。这可能对您的特定动画很重要，也可能不重要。