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 回答