title: Bootstrap Carousel - issues with animation and margin
body: <p>I'm using Bootstrap 3.2.0. Everything was working fine on 2.3.2 version, but after update to 3.2.0 my carousel started behaving strangely.</p>
  
  <p>I've noticed two issues:  </p>
  
  <ul>
  <li>It is not working animations (text should appeal smoothly and moving from the top as in the code)  </li>
  <li><code>margin-top</code> on first <code>.item</code> is okey (element is on the middle) but on last two <code>.items</code> its closer to the bottom of <code>div</code></li>
  </ul>
  
  <p>My code is here: <a href="http://jsfiddle.net/crvfn2nL/2/" rel="nofollow">http://jsfiddle.net/crvfn2nL/2/</a></p>
  
  <p>JS</p>
  
  <pre><code>jQuery(function($) {
  
      //#main-slider
      $(function(){
          $('#image-slider.carousel').carousel({
              interval: 8000
          });
      });
  
      $( '.centered' ).each(function( e ) {
          $(this).css('margin-top',  ($('.item').height() - $(this).height())/2);
      });
  
      $(window).resize(function(){
          $( '.centered' ).each(function( e ) {
              $(this).css('margin-top',  ($('.item').height() - $(this).height())/2);
          });
      });
  });
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code> #image-slider #carousel, #image-slider #carousel .carousel-inner {
      width:100%;
      margin:0 auto;
      text-align:center;
      min-height:100%;
  }
  
  #image-slider #carousel, #image-slider #carousel .carousel-inner .item {
  width:100%;
  height:100%;
  min-height:100%;
   background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    height:400px;
  }
  
  .item-nr-1 {
      background:url('http://ibin.co/1iuR0HvTp3aU');
  }
  
  .item-nr-2 {
      background:url('http://ibin.co/1iuRE1en7Wdm');
  }
  
  .item-nr-3 {
      background:url('http://ibin.co/1iuRPP1uYfye');
  }
  
  #image-slider #carousel h2 {
    font-size: 36px;
  }
  
  
  #image-slider .carousel .carousel-inner .active .animation.animated-item-1 {
    -webkit-animation: fadeInUp 300ms linear 300ms both;
    -moz-animation: fadeInUp 300ms linear 300ms both;
    -o-animation: fadeInUp 300ms linear 300ms both;
    -ms-animation: fadeInUp 300ms linear 300ms both;
    animation: fadeInUp 300ms linear 300ms both;
  }
  #image-slider .carousel .carousel-inner .active .animation.animated-item-2 {
    -webkit-animation: fadeInUp 300ms linear 600ms both;
    -moz-animation: fadeInUp 300ms linear 600ms both;
    -o-animation: fadeInUp 300ms linear 600ms both;
    -ms-animation: fadeInUp 300ms linear 600ms both;
    animation: fadeInUp 300ms linear 600ms both;
  }
  #image-slider .carousel .carousel-inner .active .animation.animated-item-3 {
    -webkit-animation: fadeInUp 300ms linear 900ms both;
    -moz-animation: fadeInUp 300ms linear 900ms both;
    -o-animation: fadeInUp 300ms linear 900ms both;
    -ms-animation: fadeInUp 300ms linear 900ms both;
    animation: fadeInUp 300ms linear 900ms both;
  }
  #image-slider .carousel .carousel-inner .active .animation.animated-item-4 {
    -webkit-animation: fadeInUp 300ms linear 1200ms both;
    -moz-animation: fadeInUp 300ms linear 1200ms both;
    -o-animation: fadeInUp 300ms linear 1200ms both;
    -ms-animation: fadeInUp 300ms linear 1200ms both;
    animation: fadeInUp 300ms linear 1200ms both;
  }
  
  #image-slider {
      margin-top:80px;    
  }
  </code></pre>
  
  <p>Why is that?</p>
  
  <p>thanks</p>