使用animation替換背景圖片來實現動畫效果時，如果直接替換背景圖片來實現，ie是不能相容的

比如：

.d-pro1{
            width: 641px;
            height: 767px;
            background-size: 641px auto;
            background-repeat: no-repeat;
            background-position: center;
            background-image: url(../img/d-pro1.png);
            -webkit-animation:d-pro1 4s infinite;
            -moz-animation: d-pro1 4s infinite;
            -o-animation: d-pro1 4s infinite;
            -ms-animation: d-pro1 4s infinite;
            animation:d-pro1 4s infinite；
}
@keyframes d-pro1 {
  0% {
    background-image: url(../img/d-pro1.png);
  }
  6% {
    background-image: url(../img/d-pro1-active.png);
  }
  12% {
    background-image: url(../img/d-pro1.png);
  }
  18% {
    background-image: url(../img/d-pro1-active.png); 
  }
  24% {
    background-image: url(../img/d-pro1.png);
  } 
  100% {
    background-image: url(../img/d-pro1.png);
  } 
}
 

在IE瀏覽器下是沒有效果的

解決辦法：將實現效果的圖片整合成一張雪碧圖，然後通過background-position屬性來替換不同圖片

如下：

.d-pro1{
            width: 641px;
            height: 767px;
            background-position: 0 0;
            background-size: 1282px auto;
            background-repeat: no-repeat;
            background-image: url(../img/d/sprite-d-pro1.png);
            -webkit-animation:d-pro1 4s infinite;
            -moz-animation: d-pro1 4s infinite;
            -o-animation: d-pro1 4s infinite;
            -ms-animation: d-pro1 4s infinite;
            animation:d-pro1 4s infinite;
}
@keyframes d-pro1 {
  0% {
    background-position: 0 0;
  }
  6% {
    background-position: -641px 0;
  }
  12% {
    background-position: 0 0;
  }
  18% {
    background-position: -641px 0; 
  }
  24% {
    background-position: 0 0;
  } 
  100% {
    background-position: 0 0;
  } 
}
 

但是這樣還有一個問題，就是背景圖片位置變換的過程肉眼可見

解決辦法：

.d-pro1{
            width: 641px;
            height: 767px;
            background-position: 0 0;
            background-size: 1282px auto;
            background-repeat: no-repeat;
            background-image: url(../img/d/sprite-d-pro1.png);
            -webkit-animation:d-pro1 4s steps(1) infinite;
            -moz-animation: d-pro1 4s steps(1) infinite;
            -o-animation: d-pro1 4s steps(1) infinite;
            -ms-animation: d-pro1 4s steps(1) infinite;
            animation:d-pro1 4s steps(1) infinite;
}
@keyframes d-pro1 {
  0% {
    background-position: 0 0;
  }
  6% {
    background-position: -641px 0;
  }
  12% {
    background-position: 0 0;
  }
  18% {
    background-position: -641px 0; 
  }
  24% {
    background-position: 0 0;
  } 
  100% {
    background-position: 0 0;
  } 
}
 

這樣就好啦～