@keyframs實現圖片gif效果

頁面中使用動效圖 通常讓設計出一個gif格式的圖，可是git圖效果都不好，有一個替代gif圖作動效的方法：使用@keyframes

具體思路：

一、設計兩個互斥的圖片（至關於把gif圖分割成一幀一幀的圖片，這裏用兩幀爲例子）

二、把兩個圖片放在同一個位置上，重疊

三、使用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;
  }
}

動畫透明度和動畫進度均可以本身設置~  你明我就暗，你暗我就明~

完成啦~