jQuery .animate与应用于同一元素的CSS3动画冲突？

Question

我使用以下javascript浏览4个视频的CSS3幻灯片。幻灯片设置为使用CSS3关键帧无限播放。视频都设置为自动播放。

现在，.animate并不像你点击下一个/上一个那样工作，它只是直接跳到那个幻灯片。我已经尝试关闭关键帧动画，并且.animate工作正常，我可以完美地导航，把它放回去，它会中断。

这是粗略设置...... DEMO

任何想法如何解决这个问题将不胜感激。

JS

//grab the width and calculate left value
var item_width = $('#carousel .video-list li').outerWidth(); 
var left_value = item_width * (-1); 

//if user clicked on prev button
$('#previous').click(function() {
//get the right position            
var left_indent = parseInt($('#carousel .video-list').css('left')) + item_width;
//slide the item            
$('#carousel .video-list').animate({'left' : left_indent}, 200,function(){    

$(".video-list, #timeline, .description-list").css({"animation-play-state": "paused", "-    
webkit-animation-play-state": "paused"});    

    //move the last item and put it as first item                
    $('#carousel .video-list li:first').before($('#carousel .video-list li:last'));           
    //set the default item to correct position
    $('#carousel .video-list').css({'left' : left_value});

});
//cancel the link behavior            
return false;

});

//if user clicked on next button
$('#next').click(function() {

//get the right position
var left_indent = parseInt($('#carousel .video-list').css('left')) - item_width;

//slide the item
$('#carousel .video-list').animate({'left' : left_indent}, 200, function () {

    $(".video-list, #timeline, .description-list").css({"animation-play-state": "paused", 
"-webkit-animation-play-state": "paused"});

    //move the first item and put it as last item
    $('#carousel .video-list li:last').after($('#carousel .video-list li:first'));                     

    //set the default item to correct position
    $('#carousel .video-list').css({'left' : left_value});

});

//cancel the link behavior
return false;

});