title: How to change Bootstrap's carousel transition from slide to fade
body: <p>I am having a slight issue changing the transition of the AngularUi <a href="http://angular-ui.github.io/bootstrap/" rel="nofollow">click here</a> carousel transition I want to change the carousel's standard sliding transition to a <code>fadeIn</code> <code>FadeOut</code> transition <a href="http://plnkr.co/edit/nRK7prNVJKFnnrKPrPP1?p=preview" rel="nofollow">Click here</a> the example presented in Plunker i have commented out the css for the sliding transition </p>
  
  <pre><code>`carousel-inner &gt; .item {
          display: none;
          position: relative;
          -webkit-transition: 0.6s ease-in-out left;
          -moz-transition: 0.6s ease-in-out left;
          -o-transition: 0.6s ease-in-out left;
          transition: 0.6s ease-in-out left;`
  }
  </code></pre>
  
  <p>I have attempted to manipulate the css animations slightly by changing it to the following to achieve a fadeIn</p>
  
  <pre><code> @-webkit-keyframes carousel-inner {
      0%{
          opacity: 0;
      }
  
      100%{
          opacity: 1;
      }
  }
  
  @keyframes carousel-inner{
       0%{
          opacity: 0;
      }
  
      100%{
          opacity: 1;
      }
  }
  
  
  .carousel-inner &gt; .item {
      display: none;
      position: relative;
       -webkit-transition: opacity 0.4s ease-in-out;
      -moz-transition: opacity 0.4s ease-in-out;
      -o-transition: opacity 2s ease-in-out;
      transition: opacity 0.4s ease-in-out;
  }
  </code></pre>
  
  <p>However it's not working the way I want it too. Has anyone experienced this problem? Or does anyone have a solution to the problem?</p>