css3 精灵图制作动画

示例

background-size: 1600% 100%;
-webkit-animation: FireAnimation 3s steps(16) infinite;
-o-animation: FireAnimation 3s steps(16) infinite;
animation: FireAnimation 3s steps(16) infinite;

@-webkit-keyframes FireAnimation {
  100% {
    background-position: -1600% 0%;
  }
}

 

 

注意:精灵图的  background-size 和 background-position的单位需要一致,不然ios 和android上显示会有很多花里胡哨的bug

你可能感兴趣的:(前端,css3动画,安卓微信浏览器)