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

Question

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

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

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

Answer 1

添加 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 或者 sass、less等编译也不需要自己写前缀了。

Answer 2

添加webkit前缀

Answer 3

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

Answer 4

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

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

Answer 5

.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;

}
}