引导轮播放大到淡出

Question

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 fade out which I found many examples of except the difference is the image will zoom in before it fades out into the next image.

In other words the image will have a transition: scale(1) to transition: scale(1.1) then it will opacity: 0 to opacity: 1 into the next image.

I got 3 random images on google just to play around with and it seems that there are 2 problems here.

1. the transition is not smooth
2. the image will scale back down before it fades out into the next image.

Codepen: http://codepen.io/anon/pen/OWezyZ

My CSS:

.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 & apply opacity
*/

@media all and (transform-3d),
(-webkit-transform-3d) {
  .carousel-inner > .item.next,
  .carousel-inner > .item.active.right {
    display: block;
    opacity: 0;
    transform: scale(1) translateZ(0);
    -webkit-transform: scale(1) translateZ(0);
  }
  .carousel-inner > .item.prev,
  .carousel-inner > .item.active.left {
    display: block;
    opacity: 0;
    -webkit-transform: scale(1.1) translateZ(0);
    transform: scale(1.1) translateZ(0);
  }
  .carousel-inner > .item.next.left,
  .carousel-inner > .item.prev.right,
  .carousel-inner > .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; }

This has been quite the challenge because again I lack the "understanding" on how the bootstrap carousel is actually working.

Help is greatly appreciated, thank you!

Answer 1

Here Codepen

Note: notice additional line in JavaScript and remove active class from html