css3帧动画

css3帧动画

实现思路：
1.做逐帧的播放图片
2.通过css3的@keyframes属性来设置播放效果，必须设置0% 和100%位置时的图片定位位置，通过设置25%，50%
等位置的图片位置来进一步确定显示的效果
3.-webkit-animation:动画名字 1s steps(1) infinite
css代码如下：

@-webkit-keyframes m_voicePlay2{
  0% {
    background-position:0 0;
  }
  25% {
    background-position:-30px 0;
  }
  50% {
    background-position:-60px 0;
  }
  75% {
    background-position:-90px 0;
  }
  100% {
    background-position:-180px 0;
  }
}
@keyframes m_voicePlay2 {
  0% {
    background-position: 0 0;
  }
  25% {
    background-position: -30px 0;
  }
  50% {
    background-position: -60px 0;
  }
  75% {
    background-position: -90px 0;
  }
  100% {
    background-position: -180px 0;
  }
}
.m_voicePlay1{width:30PX;height:30PX;margin: 0 !important; position:absolute;right:10PX;top:8PX;background:url("../img/voice.png") no-repeat ;background-size:100% 100%;}
.m_voicePlay2{ background:url('../img/yuyin.png') no-repeat 0 0;-webkit-animation:m_voicePlay2 1s steps(1) infinite;background-size:120px 30px;}