CODEWITHSUNDEEP
javascriptcsstwitter-bootstrapcarousel
Dan Byers
Dan Byers

Reputation: 185

twitter bootstrap's carousel fade transition

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!

Upvotes: 12

Views: 38910

Answers (4)

Shawn Rebelo
Shawn Rebelo

Reputation: 1077

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

Upvotes: 0

Dennis Helfensteller
Dennis Helfensteller

Reputation: 81

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?

Upvotes: 2

pwnjack
pwnjack

Reputation: 1096

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

Upvotes: 7

G.T.
G.T.

Reputation: 246

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

Upvotes: 23

Related Questions