I am trying to create a fade transition carousel for my website created with Bootstrap and AngularJS. I have created the effect but I keep getting this flash to white between each slide instead of a nice fade over the previous image. You can see an example of it here now (until the question is answered or I fix it up):

I am using UI Bootstrap because it makes Bootstrap play nice with AngularJS, which already makes most of the solutions out there inaccurate because my html looks like this:

<div class="container-fluid text-center" ng-controller="PortfolioCtrl" id="portfolio">
  <carousel interval="interval" class="carousel-fade">
    <slide ng-repeat="slide in slides" active="slide.active">
      <img ng-src="{{slide.image}}" alt="{{slide.alt}}">
    </slide>
  </carousel>
</div>

Notice that the <carousel> element is not present in a standard Bootstrap carousel; I believe it is a <div class="carousel">. My SCSS, which ought to give the correct effect, looks like this:

.carousel-fade {
  .carousel-inner {
    .item {
      transition-property: opacity;
      transition-duration: 1s;
      opacity: 0;
    }

    .active {
      opacity: 1;
    }

    .active.left,
    .active.right {
      left: 0;
      opacity: 0;
      z-index: 1;
    }

    .next.left,
    .prev.right {
      opacity: 1;
    }
  }

  .carousel-control {
    z-index: 2;
  }
}

My Javascript is pretty standard, except that I disable $animate because this was a fix I had to implement before. Here it is anyways:

angular.module('artlyticalmediawwwApp')
  .controller('PortfolioCtrl', function ($scope, $animate) {
    $scope.interval = 3000;

    $animate.enabled(false); 
    $scope.animate = null;
    $scope.animateGlobal = true;

    $scope.slides = [
    {
      image: 'images/portfolio/websites/3dsailing-Home.png',
      alt: 'plan'
    },
    {
      image: 'images/portfolio/websites/3dsailing-SailCoachPro.png',
      alt: 'act'
    },
    {
      image: 'images/portfolio/websites/3dsailing-3D-Printing.png',
      alt: 'done'
    },
    {
      image: 'images/portfolio/websites/Glass-Planner-Home.png',
      alt: 'done'
    },
    {
      image: 'images/portfolio/websites/Glass-Planner-PlanActDone.png',
      alt: 'done'
    },
    {
      image: 'images/portfolio/websites/Glass-Planner-Tutorials.png',
      alt: 'done'
    }];
  });

I am trying to create a fade transition carousel for my website created with Bootstrap and AngularJS. I have created the effect but I keep getting this flash to white between each slide instead of a nice fade over the previous image. You can see an example of it here now (until the question is answered or I fix it up):

http://development.artlyticalmedia./portfolio

I am using UI Bootstrap because it makes Bootstrap play nice with AngularJS, which already makes most of the solutions out there inaccurate because my html looks like this:

<div class="container-fluid text-center" ng-controller="PortfolioCtrl" id="portfolio">
  <carousel interval="interval" class="carousel-fade">
    <slide ng-repeat="slide in slides" active="slide.active">
      <img ng-src="{{slide.image}}" alt="{{slide.alt}}">
    </slide>
  </carousel>
</div>

Notice that the <carousel> element is not present in a standard Bootstrap carousel; I believe it is a <div class="carousel">. My SCSS, which ought to give the correct effect, looks like this:

.carousel-fade {
  .carousel-inner {
    .item {
      transition-property: opacity;
      transition-duration: 1s;
      opacity: 0;
    }

    .active {
      opacity: 1;
    }

    .active.left,
    .active.right {
      left: 0;
      opacity: 0;
      z-index: 1;
    }

    .next.left,
    .prev.right {
      opacity: 1;
    }
  }

  .carousel-control {
    z-index: 2;
  }
}

My Javascript is pretty standard, except that I disable $animate because this was a fix I had to implement before. Here it is anyways:

angular.module('artlyticalmediawwwApp')
  .controller('PortfolioCtrl', function ($scope, $animate) {
    $scope.interval = 3000;

    $animate.enabled(false); 
    $scope.animate = null;
    $scope.animateGlobal = true;

    $scope.slides = [
    {
      image: 'images/portfolio/websites/3dsailing-Home.png',
      alt: 'plan'
    },
    {
      image: 'images/portfolio/websites/3dsailing-SailCoachPro.png',
      alt: 'act'
    },
    {
      image: 'images/portfolio/websites/3dsailing-3D-Printing.png',
      alt: 'done'
    },
    {
      image: 'images/portfolio/websites/Glass-Planner-Home.png',
      alt: 'done'
    },
    {
      image: 'images/portfolio/websites/Glass-Planner-PlanActDone.png',
      alt: 'done'
    },
    {
      image: 'images/portfolio/websites/Glass-Planner-Tutorials.png',
      alt: 'done'
    }];
  });

• javascript
• css
• angularjs
• twitter-bootstrap

• stackoverflow./questions/19231678/… – Schmalzy Commented Feb 7, 2015 at 18:07
• 1 Just added the code in the answer to my development version and it doesn't work (you can take a look, it still flashes white). I tried most, if not all, of the solutions on StackOverflow already, which is why I posted a new question. – David Rhoderick Commented Feb 10, 2015 at 15:00

4 Answers 4

After having this problem for some hours I finally discovered that transform: translate3d() is the reason we both had this problem.

Try to use this code:

.carousel-fade {
  .carousel-inner {
    .item {
      opacity: 0;
      -webkit-transition-property: opacity;
      transition-property: opacity;
    }

    .active {
      opacity: 1;
    }

    .active.left,
    .active.right {
      left: 0;
      opacity: 0;
      z-index: 1;
    }

    .next.left,
    .prev.right {
      opacity: 1;
    }
  }

  .carousel-control {
    z-index: 2;
  }
}

@media all and (transform-3d), (-webkit-transform-3d) {
    .carousel-inner > .item.next,
    .carousel-inner > .item.active.right {
      -webkit-transform: translate3d( 0, 0, 0);
      transform: translate3d( 0, 0, 0);
    }
    .carousel-inner > .item.prev,
    .carousel-inner > .item.active.left {
      -webkit-transform: translate3d( 0, 0, 0);
      transform: translate3d( 0, 0, 0);
    }
    .carousel-inner > .item.next.left,
    .carousel-inner > .item.prev.right,
    .carousel-inner > .item.active {
       -webkit-transform: translate3d(0, 0, 0);
       transform: translate3d(0, 0, 0);
    }
}

Expanding on what Sprazer wrote, here's a mixin version you can use and add it to the top-level of your SCSS sheet:

@mixin carousel-fade() {

.carousel {

  .carousel-inner {

    >.item {
      opacity: 0;
      -webkit-transition-property: opacity;
      transition-property: opacity;

          @media all and (transform-3d), (-webkit-transform-3d) {

            &.next,
            &.active.right,
            &.prev,
            &.active.left,
            &.next.left,
            &.prev.right,
            &.active {
              -webkit-transform: translate3d( 0, 0, 0);
              transform: translate3d( 0, 0, 0);
            }

          }

    }

    .active {
      opacity: 1;
    }

    .active.left,
    .active.right {
      left: 0;
      opacity: 0;
      z-index: 1;
    }

    .next.left,
    .prev.right {
      opacity: 1;
    }
  }

  .carousel-control {
    z-index: 2;
  }



}

}

I found this and it works for me :

/* Fix for flickering carousel */                                                      
.carousel-inner .carousel-item {
  opacity: 0;
  top: 0;
  left: 0;
  width: 100%;
  display: block;
  position: absolute;
}
.carousel-inner .carousel-item:first-of-type {
  position: relative;
}
.carousel-inner .active {
  opacity: 1;
}
/* End of fix */

I am not an expert, but what works for me is:

.carousel-item {
    transition: none!important;
}

Put that in the CSS and the white flash goes away.