Html 优化使用CSS遮罩的CSS3动画

我正在制作一个基于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);

---

你知道我如何优化它吗？

正如Rich Bradshaw指出的，我想你会发现它并没有得到很好的优化。不过，为了获得类似的效果，您可以创建一个动画GIF，将画布大小增加一倍，然后在画布另一半的每一帧上放置一个静态版本的GIF。这样，动画将始终以不可见的方式在背景中播放，只要在需要显示动画版本时更改图像的位置，就可以切换到动画

---

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

您可能会发现webkit中的webkit掩码根本没有得到优化–它没有被大量使用，因此可能没有很多人看到它。是的，这是一种非标准方法，我认为除了不使用它并通过其他方式找到新的解决方案之外，你没有什么可以做的来优化它。一些重动画非标准方法在这一点上仍然是实验性的，即使它们存在；可能不应该使用。