Bootstrap Image Carousel Fade Transition

The built in image carousel animation for Bootstrap is a slide, which is nice, but I found this fade transition while Googling, and it seems to work well. I found it here on http://codepen.io/Rowno/pen/Afykb and it’s penned by Roland Warmerdam.

Html:

<div class="carousel slide carousel-fade" data-ride="carousel">
    <div class="carousel-inner">
        <div class="item active">
            <img class="img-rounded" src="..." alt="...">
        </div>
        <div class="item">
            <img class="img-rounded" src="..." alt="...">
        </div>
        <div class="item">
            <img class="img-rounded" src="..." alt="...">
        </div>
    </div>
</div>

Css (less):

.carousel-fade {
    .carousel-inner {
        .item {
            opacity: 0;
            -moz-transition-property: opacity;
            -o-transition-property: opacity;
            -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;
    }
}