html - 优化使用 CSS mask 的 CSS3 动画

Question

我正在制作一个基于 CSS3 的动画，其中我有一个具有线性渐变作为背景的 div，然后我使用 PNG 作为使用 -webkit-mask-image 属性的 mask 。

为了使其具有动画效果，我想将 mask 移动到渐变之上。它工作正常并且看起来很漂亮，但我的问题是它有点杀死 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，将 Canvas 大小加倍，然后将 GIF 的静态版本放置在 Canvas 另一半的每一帧上。这样，动画将始终在后台播放而不可见，您只需在想要显示动画版本时通过更改图像的位置来切换到它。

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