html - 电脑css3动画可以执行，手机基本不行，为什么，求救

Question

demo

可以查看源代码，代码不多的，用手机和电脑浏览，注意那个充电头的动画

Answer 1

I tested it,
Meizu note2 has animations on UC, Firefox, Chrome, and Meizu’s own browser.
Only mobile Opera has no animation.
lz you can try adding css prefix completion for different browsers.
Or add a flag in the meta that the browser turns on the h5 mode.

Answer 2

It is best to add the browser compatibility prefix to your code transition: all 5s linear 1s;. If you are using a browser with webkit kernel, it is best to write it like this

-webkit-transition: all 5s linear 1s;
transition: all 5s linear 1s;

Answer 3

On the mobile side, start using gpu to trigger the 3D effect of css3 and do not use js motion such as jquery. The performance will be significantly improved