CSS3 动画坑——Animation,伪类

前几天,做了两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.png

caniuse 上边 Android 4.4 以前的支持度是未知的。本人测试 加 -webkit- 之后是被支持的。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,932评论 25 709
  • afinalAfinal是一个android的ioc,orm框架 https://github.com/yangf...
    passiontim阅读 15,601评论 2 45
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,267评论 4 61
  • 耳边经常会听到这样的豪言壮语“要么减肥,要么死”“一白遮百丑,一胖毁所有”······抬眼望去,说这些话的人各...
    220d64285ade阅读 218评论 0 0
  • 最近在看一本书——《不跪着教书》,思考颇多。 其一,关乎诚信 一直以来,我同许多人说过我想要当老师,始终觉得教师是...
    little铯阅读 180评论 0 0