Question

求教，关于css3 animation效果在Android及iOS浏览器上均不显示的问题

我在pc各版本浏览器测试的结果是ie11与Safari均不显示动画效果，chrome，Firefox及opera能够显示。
下面是主要代码：
#title{width:50%;font-size:30px;color:#000;position:absolute;top:10%;left:33%;
animation:1s ease-in-out 1s normal none 1 running title;
-moz-animation:1s ease-in-out 1s normal none 1 running title;
-webkit-animation:1s ease-in-out 1s normal none 1 running title;
-o-animation:1s ease-in-out 1s normal none 1 running title;
/*5s ease 0s normal none 1 running animated_div;*/
}
@keyframes title{
0%{opacity:0;}
25%{opacity:0.25;}
50%{opacity:0.5;}
100%{opacity:1;}
}

@-moz-keyframes title{
0%{opacity:0;}
25%{opacity:0.25;}
50%{opacity:0.5;}
100%{opacity:1;}
}

@-webkit-keyframes title{
0%{opacity:0;}
25%{opacity:0.25;}
50%{opacity:0.5;}
100%{opacity:1;}
}

@-o-keyframes title{
0%{opacity:0;}
25%{opacity:0.25;}
50%{opacity:0.5;}
100%{opacity:1;}
}
html部分是：
<p id="title">乐心</p>

主要希望大神能解释一下为什么手机端浏览器均不能显示动画效果，Android测试用浏览器为自带浏览器+uc，iOS测试浏览器为Safari+QQ浏览器，均无效果。我觉得应该是我哪里写错了，但是查了一下午资料也无果。求大神指点。
如果能帮忙解释为什么pc端Safari和ie也没效果那就更感谢了。IE11版本。
我找到原因了，是我的animation属性简写写法有问题。

Answer 1

@-webkit-keyframes title{
0%{opacity:0;}
25%{opacity:0.25;}
50%{opacity:0.5;}
100%{opacity:1;}
}

这个就支持安卓的了 你写的正确呀

Answer 2

@-webkit-keyframes title{
-webkit-0%{opacity:0;}
-webkit-25%{opacity:0.25;}
-webkit-50%{opacity:0.5;}
-webkit-100%{opacity:1;}
}

请这样写

Answer 3

我也遇到同样的问题了，用css3为图片编写360度旋动画效果，浏览器都支持，在手机页面上就没有效果，你的问题解决了吗