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

问题描述

问 题

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

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

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

解决方案

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

这篇关于javascript - 为什么我这段css3动画在安卓微信里不显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！