猫头鹰旋转木马内的css3动画

Question

我制作了一个简单的css3动画（进度条）并尝试将其放入我的猫头鹰旋转木马滑块，更具体地说，放在按钮上。

    $(document).ready(function() {
      $(".owl-carousel").owlCarousel({
        navigation : true,
        pagination : true,
        paginationSpeed : 400,
        singleItem: true,
        transitionStyle: "mask",
        autoHeight: true,
        autoPlay: 6000, //Set AutoPlay to 3 seconds
        navigationText : false,
        afterAction : syncPosition,

        afterAction: function(current) {
        current.find('video').get(0).play();
    }


      });
          function syncPosition(el){
    var current = this.currentItem;      
    // code for smooth transition
    this.owl.owlItems.removeClass('turn-on');
    $(this.owl.owlItems[this.owl.currentItem]).addClass('turn-on');
  }
      function top_align() {
        $(window).scrollTop(0);
        console.log('move');
      }



    });

当它检测到currentItem（可见滑块）时，它会转动类（开启）并开始动画。

问题是进度条动画，还有transitionStyle：＆＃34; mask＆＃34;我不会使用下面的脚本来启动滑块中的视频。当然，当我删除它时，它工作正常。

afterAction: function(current) {
    current.find('video').get(0).play();
}

更新：这是fiddle

有人知道如何解决它吗？ Thx提前。