Bootstrap Carousel Crossfade

Question

我在我的网站上使用了引导程序轮播。 我希望图像的过渡能够淡化而不是幻灯片。通过以下方式实现了这一目标。

// CSS

.carousel-wrapper
{
    position:relative;
    z-index:2;
    animation-name: opacity;

}

.carousel-fade .carousel-inner .item {
  opacity: 0.6;
  transition-property: opacity;


}
.carousel-fade .carousel-inner .active {
   transition: opacity 3s ease-in-out;
   opacity:1;


}




.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  left: 0;
  opacity: 0.5;

  z-index: 1;
}
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
  opacity: 1;
}
.carousel-fade .carousel-control {
  z-index: 2;
}

// HTML

 <div id="hero-wrapper ">
    <div class="carousel-wrapper">
      <div id="hero-carousel" class="carousel slide carousel-fade">

        <div class="carousel-inner">
          <div class="item active">
            <img class="img-responsive center-block" src="images/mid1.png" width="550" height="auto">
          </div>
          <div class="item">
              <img class="img-responsive center-block" src="images/mid2.png" width="550" height="auto">
          </div>
          <div class="item">
              <img class="img-responsive center-block" src="images/mid3.png" width="550" height="auto">
          </div>



        </div>

      </div>
    </div>
  </div>

然而，每张图像在另一张图像进入之前消失。 我希望它能够像下一张图像一样交叉淡入淡出 OVER 第一张。

我做错了什么？