title: Bootstrap Carousel ZoomIn to FadeOut
body: <p>Hey so i'm customizing the Bootstrap Carousel to have a custom transition effect but am having a hard time achieving it. I believe this is do to my lack of understanding on how the carousel works exactly. Anyways the effect that I am trying to achieve is a simple <strong>fade out</strong> which I found many examples of except the difference is the image will <strong>zoom in</strong> before it <strong>fades out</strong> into the next image.</p>
  
  <p>In other words the image will have a <code>transition: scale(1)</code> to <code>transition: scale(1.1)</code> then it will <code>opacity: 0</code> to <code>opacity: 1</code> into the next image.</p>
  
  <p>I got 3 random images on google just to play around with and it seems that there are 2 problems here.</p>
  
  <ol>
  <li>the transition is not smooth</li>
  <li>the image will scale back down before it fades out into the next image. </li>
  </ol>
  
  <p><strong>Codepen:</strong> <a href="http://codepen.io/anon/pen/OWezyZ" rel="nofollow noreferrer">http://codepen.io/anon/pen/OWezyZ</a></p>
  
  <p><strong>My CSS:</strong></p>
  
  <pre><code>.carousel-inner {
    position: relative;
    display: block;
    top: 0;
    left: 0;
  }
  
  
  /*
  inspired from http://codepen.io/Rowno/pen/Afykb 
  */
  
  .carousel-inner .item {
    opacity: 0;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    -webkit-transition: opacity 2s linear;
    -moz-transition: opacity 2s linear;
    -o-transition: opacity 2s linear;
    transition: opacity 2s linear;
  }
  
  .carousel-inner .item.active {
    opacity: 1;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
  }
  
  .item img {
    display: block;
    position: relative;
    top: 0;
    left: 0;
    -webkit-transition: transform 10s linear;
    -moz-transition: transform 10s linear;
    -o-transition: transform 10s linear;
    transition: transform 10s linear;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  
  .active img {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    position: relative;
    top: 0;
    left: 0;
  }
  
  
  /*
  WHAT IS NEW IN 3.3: "Added transforms to improve carousel performance in modern browsers."
  now override the 3.3 new styles for modern browsers &amp; apply opacity
  */
  
  @media all and (transform-3d),
  (-webkit-transform-3d) {
    .carousel-inner &gt; .item.next,
    .carousel-inner &gt; .item.active.right {
      display: block;
      opacity: 0;
      transform: scale(1) translateZ(0);
      -webkit-transform: scale(1) translateZ(0);
    }
    .carousel-inner &gt; .item.prev,
    .carousel-inner &gt; .item.active.left {
      display: block;
      opacity: 0;
      -webkit-transform: scale(1.1) translateZ(0);
      transform: scale(1.1) translateZ(0);
    }
    .carousel-inner &gt; .item.next.left,
    .carousel-inner &gt; .item.prev.right,
    .carousel-inner &gt; .item.active {
      display: block;
      opacity: 1;
      transform: scale(1.1) translateZ(0);
      -webkit-transform: scale(1.1) translateZ(0);
    }
  }
  
  /* just for demo purpose */
  
  html,
  body,
  .carousel,
  .carousel-inner,
  .carousel-inner .item {
    height: 100%;
  }
  
  img { width: 100% !important; }
  </code></pre>
  
  <p>This has been quite the challenge because again I lack the "understanding" on how the bootstrap carousel is actually working.</p>
  
  <p>Help is greatly appreciated, thank you!</p>