首页 > 为什么我这段css3动画在安卓微信里不显示

为什么我这段css3动画在安卓微信里不显示

.star1{
  animation:star 1.5s ease infinite;
  animation-play-state:running;
}

@keyframes star{
  0%{
    opacity:0;
  }
  100%{
    opacity:1;
  }
}

我调用的star1 但是在安卓版的微信里,就不会闪烁,只有苹果支持,为什么呢??哪里不对呢?


添加webkit前缀


<script src="//cdn.bootcss.com/prefixfree/1.0.7/prefixfree.min.js"></script>

把这个加到你的代码里,就不用写前缀了,懒人方法


在webkit内核中是测试功能,需要使用webkit前缀


添加 webkit 前缀

.star1{
  animation:star 1.5s ease infinite;
  -webkit-animation:star 1.5s ease infinite;//here
  animation-play-state:running;
  -webkit-animation-play-state:running;
}

@keyframes star{
  0%{
    opacity:0;
  }
  100%{
    opacity:1;
  }
}
@-webkit-keyframes star{
  0%{
    opacity:0;
  }
  100%{
    opacity:1;
  }
}

使用 prefixfree 或者 sassless等编译也不需要自己写前缀了。


.star1{
animation:star 1.5s ease infinite;
animation-play-state:running;
-webkit-animation:star 1.5s ease infinite;
-webkit-animation-play-state:running;
}

@keyframes star{
0%{

opacity:0;

}
100%{

opacity:1;

}
}
@-webkit-keyframes star{
0%{

opacity:0;

}
100%{

opacity:1;

}
}

【热门文章】
【热门文章】