For the last 3 hours I've been trying to make a simple adjustment to Bootstrap 3's carousel transitions.
I've tried changing the slide speed where this is the only thing that seems to have any effect:
.carousel-inner .item {
-webkit-transition-duration: 2s;
-moz-transition-duration: 2s;
-o-transition-duration: 2s;
transition-duration: 2s;
}
but it hides the 'leaving' content too soon, and I have no clue what property to modify to fix that.
I've also tried changing it to a fade transition with
.carousel-fade .item {
opacity: 0;
-webkit-transition: opacity 2s ease-in-out;
-moz-transition: opacity 2s ease-in-out;
-ms-transition: opacity 2s ease-in-out;
-o-transition: opacity 2s ease-in-out;
transition: opacity 2s ease-in-out;
left: 0 !important;
}
.carousel-fade .active {
opacity: 1 !important;
}
.carousel-fade .left {
opacity: 0 !important;
-webkit-transition: opacity 0.5s ease-in-out !important;
-moz-transition: opacity 0.5s ease-in-out !important;
-ms-transition: opacity 0.5s ease-in-out !important;
-o-transition: opacity 0.5s ease-in-out !important;
transition: opacity 0.5s ease-in-out !important;
}
.carousel-fade .carousel-control {
opacity: 1 !important;
}
And just about every other snippet to do so that I've come across, but every single one always first removed the leaving content, showing a featureless background, before fading in the next. What am I missing? All I need is some plain CSS to override the existing transition details, but I don't know where to look any more.