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!

score 23 · Accepted Answer · edited May 23 '17 at 12:09

23

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;
}

edited May 23 '17 at 12:09

Community

1
1

answered Apr 26 '12 at 23:27

G.T.

246
2
2

1

thanks! that certainly works for the "real" browsers ;). unfortunately, i do need to support IE so i had to look for another solution. – Dan Byers May 01 '12 at 04:22
4

@DanByers and did you *find* another solution? – Jordan Reiter Jan 15 '13 at 16:41

score 7 · Answer 2 · answered Apr 04 '13 at 15:23

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 */
}

score 2 · Answer 3 · edited May 23 '17 at 12:25

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?

score 0 · Answer 4 · answered Feb 04 '16 at 21:58

Hopefully helps the next person. I wanted Scale and Fade.

Really do not need to add an additional class. Bootstrap 3.3.6

Fade and Scale (Takes left/right arrows into consideration)

/* Carousel Scale and Fade */

/* Carousel Fade */
.carousel .item {
    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -ms-transition: opacity 1s;
    -o-transition: opacity 1s;
    transition: opacity 1s;
}
.carousel .active.left, .carousel .active.right {
    left: 0;
    opacity: 0;
    z-index: 2;
}
.carousel .next, .carousel .prev {
    left: 0;
    opacity: 1;
    z-index: 1;
}

/* Carousel Scale */
.carousel .item.active {
    animation: zoom 30s;
    -moz-animation: zoom 30s;
    -webkit-animation: zoom 30s;
    -o-animation: zoom 30s;
}
@keyframes zoom {
    from {transform:scale(1);}
    to {transform:scale(2);}
}
@-moz-keyframes zoom {
    from {-moz-transform:scale(1);}
    to {-moz-transform:scale(2);}
}
@-webkit-keyframes zoom {
    from {-webkit-transform:scale(1);}
    to {-webkit-transform:scale(2);}
}
@-o-keyframes zoom {
    from {-o-transform:scale(1);}
    to {-o-transform:scale(2);}
}

twitter bootstrap's carousel fade transition

4 Answers4