title: Bootstrap carousel refuses to transition smoothly after css adjustments
body: <p>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:</p>
  
  <pre><code>.carousel-inner .item {
    -webkit-transition-duration: 2s;
    -moz-transition-duration: 2s;
    -o-transition-duration: 2s;
    transition-duration: 2s;
  }
  </code></pre>
  
  <p>but it hides the 'leaving' content too soon, and I have no clue what property to modify to fix that.</p>
  
  <p>I've also tried changing it to a fade transition with </p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>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.</p>