CSS转换无法在Chrome中运行

Question

我正在使用CSS转换来简化引导轮播中图像之间的转换。这在Chrome和Safari中已经好几个月了。突然间它在Chrome中无效。

HTML（在Jade中）：

div(class="item")
    img.landing-bg(src="images/aa/ny58.jpg", alt="")

CSS：

.item {
    -webkit-transition: opacity ease-in-out 1s !important;
       -moz-transition: opacity ease-in-out 1s !important;
        -ms-transition: opacity ease-in-out 1s !important;
         -o-transition: opacity ease-in-out 1s !important;
            transition: opacity ease-in-out 1s !important;
}

.carousel .active.left {left:0;opacity:0;z-index:2;}

.carousel .active.right {right:0;opacity:0;z-index:2;}

Answer 1

我在一个项目.carousel-fade中使用了一个小插件，它基本上就是你需要的：

的 HTML

<div id="myCarousel" class="carousel carousel-fade slide">
  ...
</div>

的 CSS

/*
 * Carousel Fade Plugin
 */
.carousel-fade .item {
  -webkit-transition: opacity ease-in-out 2s;
  -moz-transition: opacity ease-in-out 2s;
  -o-transition: opacity ease-in-out 2s;
  transition: opacity ease-in-out 2s;
}

.carousel-fade .active.left,
.carousel-fade .active.right {
  left: 0;
  z-index: 2;
  opacity: 0;
  filter: alpha(opacity=0);
}

jsFiddle example.