手机浏览器为什么不支持CSS动画?已加了-webkit-animation写法了啊

一直没有解决这个问题;
做的小动画,在PC浏览器都好着;
但是在手机就不行了;
动画逻辑是:
当点击这个元素时,他的字变色,它字旁边的三角旋转;就这样;
如图:
图片描述

这个在web上是好的;
但是在安卓浏览器上就不行;
代码如下:
这里是点击时加色,旋转;

.list_tab.active span{
animation:myfirst 1s forwards;
-moz-animation:myfirst 1s forwards;
-webkit-animation:myfirst 1s forwards; 
-o-animation:myfirst 1s forwards; 
}

下面是动画的@keyframes myfirst

@keyframes myfirst
{
from {transform:rotate(90deg) scale(.5)}
to{transform:rotate(180deg) scale(.5)}
}

@-moz-keyframes myfirst 
{
from {transform:rotate(90deg) scale(.5)}
to{transform:rotate(180deg) scale(.5)}
}

@-webkit-keyframes myfirst
{
from {transform:rotate(90deg) scale(.5)}
to{transform:rotate(180deg) scale(.5)}
}

@-o-keyframes myfirst
{
from {transform:rotate(90deg) scale(.5)}
to{transform:rotate(180deg) scale(.5)}
}

这已经是包括了所有的写法了,但是在手机浏览器还是不支持;痛苦中。。
请解决办法?

阅读 10.2k
1 个回答

-webkit-transform 应该还是兼容性问题 试下这个

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