如果没有javascript，我想你是做不到的，但是你可以用一个关键帧动画来达到同样的效果。

.fade-bg {
  animation-name: fade-bg;
  animation-delay: 0;
  animation-iteration-count: infinite;
  animation-direction: forward;
}

@keyframes fade-bg {
    0% {
        opacity: 0;
        background-image: url('image-1.jpg');
    }

    25% {
        opacity: 1;
        background-image: url('image-1.jpg');
    }

    50% {
        opacity: 0;
        background-image: url('image-1.jpg');
    }

    51% {
        opacity: 0;
        background-image: url('image-2.jpg');
    }

    75% {
        opacity: 1;
        background-image: url('image-2.jpg');
    }

    100% {
        opacity: 0;
        background-image: url('image-2.jpg');
    }
}

EXAMPLE

我不确定仅使用css是否可行，但如果您在JS中巧妙地设置了setInterval方法，您可能会通过将类拆分为两个来模拟相同的事情。

var index = 1;

function switchBackground() {
   if (index == 1) {
      //this switches to  the first background
      var div = document.getElementById("yourDiv");
      div.className = "fade-bg-1";
      index = 0;
   }
   else {
      //this switches to  the second background
      var div = document.getElementById("yourDiv");
      div.className = "fade-bg-2";
      index = 1;
   }
}

setInterval(switchBackground(), 6000);

.fade-bg-1和.fade-bg-2是两个动画类。
这里有一个jsfiddle，如果你想玩它。

我在6年前问过这个问题，现在已经发生了很大的变化，但没有真实的的纯css解决方案。
我能想到的最接近的方法是使用伪元素来应用第二个动画。

可能的解决方案：

使用类似::after的伪元素并将第二个动画应用于它。

代码：

.animation--fade-bg, .animation--fade-bg::after {
  width: 500px;
  height: 500px;
  background-size: cover;
  background-position: 50%;
  background-repeat: no-repeat;
  
  animation-iteration-count: infinite;
  animation-duration: 3s;
}

 .animation--fade-bg::after {
  content: "";
  display: block;

  animation-direction: reverse;
}

.animation--fade-bg-1 {
  animation-name: fade-bg-1;

}

.animation--fade-bg::after {
  animation-name: fade-bg-2;
}

@keyframes fade-bg-1 {
  from {
    opacity: 0;
    background-image: url('http://i.imgur.com/sRnvs0K.jpg');
  }
    
  50% {
    opacity: 1;
    background-image: url('http://i.imgur.com/sRnvs0K.jpg');
  }   
     
  to {
    opacity: 0;
    background-image: url('http://i.imgur.com/sRnvs0K.jpg');
  }
}

@keyframes fade-bg-2 {
  from {
    opacity: 0;
    background-image: url('http://i.imgur.com/wL4RT1w.jpg');
  }

  50% {
    opacity: 1;
    background-image: url('http://i.imgur.com/wL4RT1w.jpg');
  }

  to {
    opacity: 0;
    background-image: url('http://i.imgur.com/wL4RT1w.jpg');
  }
}

<div class="animation--fade-bg animation--fade-bg-1"></div>