使用insertBefore动画div的运动

Question

所以我有这种div结构，就像幻灯片一样：

<div id="slideshow">
    <div class="slide str-1"><img></div>
    <div class="slide str-2"><img></div>
    <div class="slide str-3"><img></div>
    <div class="slide str-4"><img></div>
    <div class="slide str-5"><img></div>
</div>

我使用jQuery每隔三秒切换一次div的顺序：

jQuery(".slide").each(function() {
    jQuery(this).insertBefore(jQuery(this).prev());
})

我使用CSS创建不同的尺寸，因此1,2和4,5图像较小，位于5-和中心图像后面：

.slide {
    vertical-align: middle;
    display: table-cell;
    position: relative;
    transition: 1s;
    &:nth-child(3) {
        transform:scale(1.6);
        z-index: 5;
    }
    &:nth-child(2),&:nth-child(4) {
        transform:scale(1.4);
        z-index: 4;
    }
}

Div正在切换我想要的位置，但唯一的问题是没有平滑过渡。他们只是像你那样切换你所做的事情，这看起来并不好。

有没有办法动画这个？像这样，图像会在切换位置时剧烈地改变尺寸（比例）？

更新：摆弄它现在的例子 - ＆gt; https://jsfiddle.net/3tfro9mb/6/