В настоящее время при смене слайда происходит «прыжок», и он выглядит не очень хорошо. Мне нужна помощь с эффектом перехода между слайдами. Кто-нибудь может помочь мне улучшить эффект затухания, чтобы он больше походил на эффект перекрестного затухания? .
Вот 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
});