css3 帧动画 适合移动端吗?

如题,动画元件比较多,而且动画元素本身动画较复杂,如果用svg的话会不会太卡
没有什么交互,也没有进度控制,不知道帧动画是否合适?
如果帧动画的雪碧图长度达到3wpx,移动端还能正常应付吗?
如何实现或者优化?

阅读 4.7k
1 个回答

你是想在@keyframes里面用background-postion做那种一张张图片连起来的动画?
CSS动画是在主线程之外运行的,浏览器也可以对它进行优化,速度比JS的animate(在主线程运行)快,还可以开启GPU加速,具体不知道你动画多大,太大了肯定是有影响的,特别是移动端,那样不如做成GIF或者SVG算了。

下面是开启GPU加速和防止闪烁的方法

开启GPU加速
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);

防止闪烁
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;

-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题