移动浏览器animation动画兼容性声明

找到了部分移动浏览器不显示animation动画的原因,原来锤子浏览器和chrome浏览器都是webkit内核,无需额外兼容性声明,其他浏览器的内核声明格式需要额外讲究,之前我的兼容声明是参考w3school写的,以moz为例:
@-moz-keyframes weibo
{
0% {transform:rotate(0deg)}
2% {transform:rotate(12deg)}
4% {transform:rotate(-12deg)}
6% {transform:rotate(12deg)}
8% {transform:rotate(-12deg)}
10% {transform:rotate(12deg)}
12% {transform:rotate(0deg)}
100% {transform:rotate(0deg)}
}

找了一些资料,原来这种写法只对桌面浏览器有用,所以需要以下写法:

@-moz-keyframes weibo
{
0% {-moz-transform:rotate(0deg)}
2% {-moz-transform:rotate(12deg)}
4% {-moz-transform:rotate(-12deg)}
6% {-moz-transform:rotate(12deg)}
8% {-moz-transform:rotate(-12deg)}
10% {-moz-transform:rotate(12deg)}
12% {-moz-transform:rotate(0deg)}
100% {-moz-transform:rotate(0deg)}
}

需要在每一个动画关键帧都作声明,修改后果然在UC、搜狗、QQ等手机浏览器上生效了。