jQueryまたはJSまたはcss3のanimationで滑らかに移動させるには？


class="n2"からclass="n1"に移動する際、滑らかにスーッと移動させたいのですが、うまくいきません。  
今は、かくかくしています。  
jsでclassを変更してcssのpositionで位置をズラしているのですが、滑らかに移動（変更）させるには、どこにどのように書いたらよいでしょうか。ご教示の程よろしくお願いいたします。

<https://jsfiddle.net/Lennxhjc/1/>

[code]

    $(function() {
      var $wrapper = $('.wrapper');
      var classNameList = [
        'n5', 'n4', 'n3', 'n2', 'n1',
        /*'n6', 'n7', 'n8', 'n9'*/
      ];
      setInterval(function() {
        var nodes = classNameList.map(function(className) {
          return {
            className: className,
            $node: $wrapper.find('.' + className)
          };
        });
        var nodes3 = new Array(classNameList.length);
        for (var i = 0; i < classNameList.length; i++) {
    
          var name = classNameList[i];
          nodes3[i] = {
            $node: $wrapper.find('.' + name),
            className: name
          }
        }
        nodes.forEach(function(current, currentIndex, whole) {
          var nextIndex = (currentIndex === whole.length - 1) ? 0 : currentIndex + 1;
          current.$node.removeClass(current.className);
          current.$node.addClass(whole[nextIndex].className);
        });
      }, 5000);
    })();
[/code]

[code]

    #slide {
      width: 320px;
      margin: 0 auto;
      text-align: center;
    }
    
    #slide ul {
      position: relative;
      height: 300px;
    }
    
    #slide li {
      position: absolute;
      overflow: hidden;
      width: 320px;
      margin: 0 auto;
      text-align: center;
      background: #FFF;
    }
    
    #slide .n1 {
      /* アニメーション前はn2と同じ大きさ・位置にしておく */
      bottom: 0;
      z-index: 10;
      opacity: 1;
    }
    
    #slide .n2 {
      bottom: 18%;
      z-index: 9;
      opacity: 1;
    }
    
    #slide .n3 {
      bottom: 30%;
      z-index: 8;
      opacity: 0.9;
    }
    
    #slide .n4 {
      bottom: 40%;
      z-index: 7;
      opacity: 0.7;
    }
    
    #slide .n5 {
      bottom: 50%;
      z-index: 6;
      opacity: 0.4;
    }
    
    #slide .n1 img {
      width: 100%;
    }
    
    #slide .n2 img {
      width: 83%;
    }
    
    #slide .n3 img {
      width: 73%;
    }
    
    #slide .n4 img {
      width: 63%;
    }
    
    #slide .n5 img {
      width: 53%;
    }
    
    
    /* img仮の設定 */
    
    img {
      background: #ccc;
      width: 50px;
      height: 70px;
    }
    
    
    /* 3秒止めてから2秒かけてscaleoutのkeyframesを実行（足して5秒）。jsの5秒と同じ。 */
    
    .n1 {
      -webkit-animation: scaleout 2.0s ease-in-out 3.0s;
      animation: scaleout 2.0s ease-in-out 3.0s;
    }
    
    
    /* n1を1.5倍に拡大して消す */
    
    @-webkit-keyframes scaleout {
      0% {
        -webkit-transform: scale(1.0)
      }
      100% {
        -webkit-transform: scale(1.5);
        opacity: 0;
      }
    }
    
    @keyframes scaleout {
      0% {
        transform: scale(1.0);
        -webkit-transform: scale(1.0);
      }
      100% {
        transform: scale(1.5);
        -webkit-transform: scale(1.5);
        opacity: 0;
      }
    }
[/code]

[code]

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <div id="slide">
      <ul class="wrapper">
        <li class="n1">
          <img src="img/01.jpg" width="" height="" alt="">
        </li>
    
        <li class="n2">
          <img src="img/02.jpg" width="" height="" alt="">
        </li>
    
        <li class="n3">
          <img src="img/03.jpg" width="" height="" alt="">
        </li>
    
        <li class="n4">
          <img src="img/04.jpg" width="" height="" alt="">
        </li>
    
        <li class="n5">
          <img src="img/05.jpg" width="" height="" alt="">
        </li>
      </ul>
    </div>
[/code]




cssのanimationなら、transformを変化させると滑らかです。  
z軸の移動をさせれば、重なり順もちゃんとシミュレートされます。  
ループする仕組みもjsより簡素・安全に書けるのでおすすめです。

[code]

    body {
       overflow: hidden;
    }
    .wrapper {
       position: relative;
       width: 200px;
       margin: 1em auto;
       list-style: none;
       transform-style: preserve-3d;
       perspective: 500px;
    }
    .wrapper li {
       background-color: rgba(100,200,100,1);
       color: #fff;
       width: 100%;
       position: absolute;
       left: 0;
       top: 0;
       text-align: center;
       line-height: 2;
       transform-origin: center top 0px;
       animation: maenideru 30s infinite both;
    }
    .wrapper li:nth-of-type(1) {
       animation-delay: -24s;
    }
    .wrapper li:nth-of-type(2) {
       animation-delay: -18s;
    }
    .wrapper li:nth-of-type(3) {
       animation-delay: -12s;
    }
    .wrapper li:nth-of-type(4) {
       animation-delay: -6s;
    }
    .wrapper li:nth-of-type(5) {
       animation-delay: 0s;
    }
    @keyframes maenideru {
       0%,10% {
         transform: translateZ(-250px);
         opacity: 0;
       }
       15%,30% {
         transform: translateZ(-200px) translateY(1em);
       }
       35%,50% {
         transform: translateZ(-150px) translateY(2em);
       }
       55%,70% {
         transform: translateZ(-100px) translateY(3em);
       }
       75%,90% {
         transform: translateZ(-50px) translateY(4em);
       }
       95% {
         transform: translateZ(0px) translateY(5em);
         opacity: 1;
       }
       100% {
         transform: translateZ(100px) translateY(4em);
         opacity: 0;
       }
    }
[/code]

[code]

    <ul class="wrapper">
      <li>イメージ1</li>
      <li>イメージ2</li>
      <li>イメージ3</li>
      <li>イメージ4</li>
      <li>イメージ5</li>
    </ul>
[/code]

