3

我正在处理基于 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);

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

4

1 回答 1

0

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

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

于 2012-12-21T15:53:12.490 回答