javascript - css3 帧动画 适合移动端吗？

问题描述

问 题

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

解决方案

你是想在@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;

这篇关于javascript - css3 帧动画 适合移动端吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！