前几天,做了两css3动画,一个loading动画,一个logo 动画。
测试发现这两动画,在一台神机(华为 G-L75 os :Android 4.3)上不动!
此机乃手机中的IE。当然移动端不能像pc 测浏览器版本,和种类就可以了。移动端还是设备有关系。总不能各种设备来一台,简直要翔。
demo
<style type="text/css">
.div1{
width:200px;
height:200px;
position: relative;
}
.div1::before{
content:"1234";
position:absolute;
width:100%;
height:100%;
background:#f00;
-webkit-animation: test 2s linear 0s infinite;
animation: test 2s linear 0s infinite;
}
@-webkit-keyframes test {
0% { background:#f00; }
100% { background:#0f0; }
}
@keyframes test {
0% { background:#f00; }
100% { background:#0f0; }
}
</style>
<body>
<div class="div1"></div>
</body>
jdfw.gif
结果
此机型 不是不支持 动画,而是 **不支持 伪元素 使用动画 **,包括 transform 动画。
补充
Paste_Image.pngcaniuse 上边 Android 4.4 以前的支持度是未知的。本人测试 加 -webkit- 之后是被支持的。
网友评论