关于CSS3动画的一段JS代码问题

Question

下面的jquery代码部分，$('.next')的click事件是没问题的，$('.prev')事件里执行到第3次点击就出问了，然后我把里面的animation4换成animation1，animation3换成animation2就是没问题的，CSS3的代码我也贴出来了，我实在看不出这几个animation有什么错，求大神解答！！

 <div class="header">
        <div class="logo">
            <img src="images/logo.png" alt="">
        </div>

        <div class="ss-bar hidden-lg hidden-md"></div>
        <div class="bar col-lg-4 visible-lg visible-md">
            <ul>
                <li><a href="">长城会</a></li>
                <li><a href="">会员网络</a></li>
                <li><a href="">GMIC</a></li>
                <li><a href="">联系我们</a></li>
            </ul>

        </div>
    </div>

    <div class="banner">
        <div id="carousel1" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->
            <ol class="carousel-indicators">
                <li data-target="#carousel1" data-slide-to="0" class="active"></li>
                <li data-target="#carousel1" data-slide-to="1"></li>
                <li data-target="#carousel1" data-slide-to="2"></li>
            </ol>

            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox">
                <div class="item active">
                    <img src="images/1.jpg">

                </div>
                <div class="item">
                    <img src="images/2.jpg">

                </div>
                <div class="item">
                    <img src="images/3.jpg">

                </div>
            </div>
        </div>
        <div class="s1">
            <b>啊啊啊啊啊啊啊啊啊啊啊啊啊啊</b>
        </div>
        <div class="s1">
            <b>呃呃呃呃呃呃呃呃呃额</b>
        </div>
        <div class="s1">
            <b>滴答滴答滴答滴答滴答滴答滴答滴答</b>
        </div>
        <a href="javascript:;" class="prev">&lt;</a>
        <a href="javascript:;" class="next">&gt;</a>
    </div>

 $('.s1').eq(1).css('display', 'none');
    $('.s1').eq(2).css('display', 'none');
    $('.s1').eq(0).addClass('animation2');
    var nowslide = 0;
    var animateflag = true;
    var temp1;
    $('.next').click(function(event) {
        if(animateflag){
            animateflag = false;
            $('.s1').eq(nowslide).removeClass('animation1');
            $('.s1').eq(nowslide).removeClass('animation2');
            (nowslide >= 2) ? temp1=0:temp1=(nowslide + 1);
            $('.s1').eq(temp1).css('display', 'block');
            $('.s1').eq(nowslide).addClass('animation1');
            nowslide = nowslide + 1;if(nowslide >= 3) nowslide = 0;
            setTimeout(function(){$('#carousel1').carousel('next');},850);
            setTimeout(function(){$('.s1').eq(temp1).addClass('animation2').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){animateflag = true;});},1300);
        }   
    });

    $('.prev').click(function(event) {
        if(animateflag){
            animateflag = false;
            $('.s1').eq(nowslide).removeClass('animation4');
            $('.s1').eq(nowslide).removeClass('animation3');
            (nowslide <= 0) ? temp1=2:temp1=(nowslide - 1);
            $('.s1').eq(temp1).css('display', 'block');
            $('.s1').eq(nowslide).addClass('animation4');
            nowslide = nowslide - 1;if(nowslide <= -1) nowslide = 2;
            setTimeout(function(){$('#carousel1').carousel('prev');},850);
            setTimeout(function(){$('.s1').eq(temp1).addClass('animation3').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){animateflag = true;});},1300);


        }   
    });

 .animation1 { animation: animation1 .6s linear forwards; }

.animation2 { animation: animation2 .6s linear forwards; }

.animation3 { animation: animation3 .6s linear forwards; }

.animation4 { animation: animation4 .6s linear forwards; }

@keyframes animation1 { 0% { left: 20%; }
  60% { left: 19%; }
  100% { left: -40%; } }
@keyframes animation2 { 0% { left: 100%; }
  55% { left: 90%; }
  100% { left: 20%; } }
@keyframes animation3 { 0% { left: -40%; }
  60% { left: -39%; }
  100% { left: 20%; } }
@keyframes animation4 { 0% { left: 20%; }
  55% { left: 30%; }
  100% { left: 100%; } }

Answer 1

会是js事件并发冲突不呢？