twitter bootstrap's carousel fade transition

Question

this is a follow-up question regarding an answer by @StrangeElement to this older question: Can the Twitter Bootstrap Carousel plugin fade in and out on slide transition

i tried @StrangeElement's mod to the bootstrap.css and i almost have it working. the problem is that when the active image fade's out, it fades to white, then the next image will pop in with no fade in animation. what might i be missing here?

here's the example i'm working with:

http://planetofsoundonline.com/beta/index.php

any kind of pointers would be hugely appreciated. thanks!

Solution 1

Take a look at this fiddle. Unfortunately it doesn't work on any of the currently available versions of Internet Explorer.

Your carousel div only needs an extra class carousel-fade added, for it to work.

[source]

This transition shows the next image and then fades the new image out on top of it. If you want a direct fade out fade in animation, add these lines to the css.

.carousel.carousel-fade .item {
  opacity:0;
}

.carousel.carousel-fade .active.item {
    opacity:1;
}

Solution 2

What about adding:

 filter: alpha(opacity=100); /* ie fix */

Resulting in:

.carousel.carousel-fade .item {
  opacity:0;
  filter: alpha(opacity=0); /* ie fix */
}

.carousel.carousel-fade .active.item {
    opacity:1;
    filter: alpha(opacity=100); /* ie fix */
}

Solution 3

I succesfully changed the carousel to fading images instead of sliding them. And I also scaled the images via CSS so they are responsive :

img.carousel-img {
  max-width:1900px;
  width:100%;
}

Unfortunately on Webkit-browsers, while the fading-animation was active, every image was scaled up to its original-size. And immediately after each animation has finished, the image would be scaled correct as per above CSS-rule again (immediately, not animated). Of course the animation looked amateurish & stuttering this way. So I added

-webkit-transform: translate3d(0,0,0);

to the carousel´s fading-transition-rule and the animation works like a charm since then. So the rule looks like:

.carousel-fade .carousel-inner .item {
  opacity: 0;
  -webkit-transition-property: opacity;
  -moz-transition-property: opacity;
  -o-transition-property: opacity;
  transition-property: opacity;
  -webkit-transform: translate3d(0,0,0);  /* WEBKIT-FIX FOR FADING SCALED IMAGES CORRECTLY VIA CSS-TRANSITIONS */
}

Here I found this solution: Why does applying '-webkit-backface-visibility: hidden;' fix issues with negative margin transition on on ios / ipad 5.1?