@keyframs实现图片gif效果

页面中使用动效图 一般让设计出一个gif格式的图，但是git图效果都很差，有一个替代gif图做动效的方法：使用@keyframes

具体思路：

1、设计两个互斥的图片（相当于把gif图分割成一帧一帧的图片，这里用两帧为例子）

2、把两个图片放在同一个位置上，重叠

3、使用css改变图片的透明度，实现动画效果

上代码！！

<div class="ani ani_1"></div>
<div class="ani ani_2"></div>

.ani_1{
  background: url(/xxx.png) 0 0 no-repeat;
  animation-name: opacity_1_0_1;
  animation-duration: 1s;
  animation-iteration-count: infinite;  
}
.ani_2{
  background: url(/xxx.png) 0 0 no-repeat;
  animation-name: opacity_0_1_0;
  animation-duration: 1s;
  animation-iteration-count: infinite;  
}

@-webkit-keyframes opacity_1_0_1 {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 1;
  }
  75% {
    opacity: .2;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes opacity_0_1_0 {
  0% {
    opacity: .2;
  }
  25% {
    opacity: .2;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: .2;
  }
}

动画透明度和动画进度都可以自己设置~  你明我就暗，你暗我就明~

完成啦~