美文网首页
CSS3 动画坑——Animation,伪类

CSS3 动画坑——Animation,伪类

作者: Northerner | 来源:发表于2016-10-24 16:41 被阅读409次

前几天,做了两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- 之后是被支持的。

相关文章

网友评论

      本文标题:CSS3 动画坑——Animation,伪类

      本文链接:https://www.haomeiwen.com/subject/pfyluttx.html