猫头鹰旋转木马2肯伯恩斯效果

Question

当前，当幻灯片更改时，会出现“跳转”，并且效果不佳。 我需要一些幻灯片之间过渡效果的帮助。有人可以帮助我改善衰落效果，使其更像是交叉衰落效果吗？。

这是jsfiddle https://jsfiddle.net/rk48twL6/

HTML

<div class="ken-carousel owl-carousel owl-theme">
<div class="item">
    <img src="https://picsum.photos/id/312/940/460" alt="">
 </div>
 <div class="item">
    <img src="https://picsum.photos/id/290/940/460" alt="">
 </div>
 <div class="item">
     <img src="https://picsum.photos/id/411/940/460" alt="">
 </div>
</div>

CSS

.ken-carousel .owl-item.active .item img {
   -webkit-animation: kenburns 16s forwards;
   animation: kenburns 16s forwards;
}


@keyframes kenburns {
    0% {
        transform: scale3d(1, 1, 1) translate3d(0px, 0px, 0px);
        animation-timing-function: ease-in;
    }

    100% {
        transform: scale3d(1.3, 1.3, 1.3) translate3d(-100px, -30px, 0px);
        animation-timing-function: ease-in;
    }
}

JS

var ken_owl = $('.ken-carousel').owlCarousel({
    loop: true,
    margin: 0,
    mouseDrag: true,
    autoplay:true,
    autoplayTimeout: 12000,
    nav: false,
    items: 1,
    animateIn: 'fadeIn', // add this
    animateOut: 'fadeOut',  // and this
});