html - CSS transition not working in Chrome

Question

I am using CSS transition to ease transition between images in a bootstrap carousel. This was working perfectly for months in Chrome and Safari. All the sudden it does not work in Chrome.

HTML (in 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 示例。