在Owl Carousel中设置动画滑块或标题文本的问题

Question

我找到了一个代码示例，并设法将进度条添加到OWL Carousel 2滑块。

进度条还可以，但是当我尝试为滑块项目设置动画或在字幕文本上添加一些动画时遇到问题。

<div id="demo" class="container">
    <div id="owl-demo" class="owl-demo">
        <div class="slide-progress"></div>
            <div class="owl-carousel owl-theme">
                    <div class="item"><img src="https://via.placeholder.com/1920x600.png" alt="" />
                    <div class="caption">
                        <span class="animated bounce">First Caption</span>
                    </div>
                </div>
            </div>
    </div>
</div>

initSlider();

function initSlider() {
  jQuery(".owl-carousel").owlCarousel({
    items: 1,
    loop: true,
    autoplay: true,
    autoplayTimeout: 3500,
    animateOut: "slideOutDown",
    animateIn: "flipInX",
    smartSpeed:450,
    onInitialized: startProgressBar,
    onTranslate: resetProgressBar,
    onTranslated: startProgressBar
  });
}
var owl = jQuery('.owl-carousel');
  owl.on('changed.owl.carousel', function(event) {
      var item = event.item.index - 2;     // Position of the current item
      jQuery('span').removeClass('animated bounce');
 jQuery('.owl-item').not('.cloned').eq(item).find('span').addClass('animated bounce');
  });


function startProgressBar() {
  // apply keyframe animation
  jQuery(".slide-progress").css({
    width: "100%",
    transition: "width 9000ms"
  });
}

function resetProgressBar() {
  jQuery(".slide-progress").css({
    width: 0,
    transition: "width 0s"
  });
}

问题1。。如何为“ .item”添加动画？

问题2。我也可以为字幕添加动画吗？

谢谢