关于火箭的问题

        <div class="screen_2">

            <h2 class="screen_2_heading">每堂课都是真实商业案例</h2>

            <div class="screen_2_banner"></div>

            <h3 class="screen_2_subheading">真实案例，真实场景，在实战中实践，操作，调试<br/>

            大牛带你体验BAT真实开发流程，所有开发过程一一为你呈现</h3>

            <div class="screen_2_picture_sc2"></div>

            <div class="screen_2_picture_sc2_1"></div>

            <div class="screen_2_picture_sc2_2"></div>

        </div>

/*展示部分设置宽高*/

.screen_1,.screen_2,.screen_3,.screen_4,.screen_5,.screen_6{height:640px;width: 100%;position: relative;}    

.screen_1{background: url(../img/sc1.jpg) no-repeat center center;text-align: center;background-size: cover;}

.screen_1_heading{color: white;padding-top: 260px;font-size: 40px;}  

.screen_1_subheading{color: white;padding-top: 30px;}  

.screen_2{background-color: rgba(236, 240, 241,1.0);text-align: center;}

.screen_2_heading{padding-top: 70px;font-size: 40px;}

.screen_2_banner{height: 3px;background-color: red;width: 50px;margin:20px auto;}  

.screen_2_subheading{padding-top: 10px;}  

.screen_2_picture_sc2{background: url(../img/sc2.png) no-repeat center center;

                      height: 360px;width: 750px;position: absolute;

                      left: 50%;margin-left: -375px;top: 50%;margin-top: -40px;

                      z-index: 1;}

.screen_2_picture_sc2_1{background: url(../img/sc2-1.png) no-repeat center center;

                        height: 380px; width: 270px;position: absolute;

                        left: 50%;margin-left: -130px;top: 50%;margin-top: -60px;

                        z-index: 3;}

.screen_2_picture_sc2_2{background: url(../img/sc2-2.png) no-repeat center center;

                        height: 210px; width: 266px;position: absolute;

                        left: 50%;top: 50%;

                        z-index: 2;}

.screen_2_picture_sc2_1,.screen_2_heading,.screen_2_subheading{transition:all 1s;}

.screen_2_heading_init,.screen_2_subheading_init{opacity: 0;transform: translate(0,100%);}

.screen_2_heading_done,.screen_2_subheading_done{opacity: 1;transform: translate(0,0);}

.screen_2_picture_sc2_1_init{opacity: 0;}

.screen_2_picture_sc2_1_done{opacity: 1;}

.screen_2_picture_sc2_2_init{opacity: 0;transform: translate(0,100%)}

.screen_2_picture_sc2_2_done{animation: bounce 1s;animation-delay: 1s;}

@-webkit-keyframes bounce{  0% {  opacity: 0;

                                -webkit-transform: translate3d(0, 3000px, 0);

                                transform: translate3d(0, 3000px, 0);}

                            60%{  opacity: 1;

                                -webkit-transform: translate3d(0, -20px, 0);

                                transform: translate3d(0, -20px, 0);}

                            75% {-webkit-transform: translate3d(0, 10px, 0);

                                transform: translate3d(0, 10px, 0);}

                            90% {-webkit-transform: translate3d(0, -5px, 0);

                                transform: translate3d(0, -5px, 0);}

                            100% { -webkit-transform: translate3d(0, 0, 0);

                                transform: translate3d(0, 0, 0);}

                            }

js部分

var screen2_heading= document.querySelector(".screen_2_heading");

var screen2_subheading = document.querySelector(".screen_2_subheading");

var screen_2_picture_sc2_1 =document.querySelector(".screen_2_picture_sc2_1");

var screen_2_picture_sc2_2 =document.querySelector(".screen_2_picture_sc2_2")

window.onscroll= function(){

    var scroll = document.documentElement.scrollTop;

    console.log(scroll);

    if(scroll<320){

        screen1_heading.setAttribute("class","screen_1_heading screen_1_heading_done");

        screen1_subheading.setAttribute("class","screen_1_subheading screen_1_subheading_done");

        header.setAttribute("class","header header_done");

    }else{screen1_heading.setAttribute("class","screen_1_heading screen_1_heading_init");

    screen1_subheading.setAttribute("class","screen_1_subheading screen_1_subheading_init");

    }

    if(scroll>=640 && scroll<960){

        screen2_heading.setAttribute("class","screen_2_heading screen_2_heading_done");

        screen2_subheading.setAttribute("class","screen_2_subheading screen_2_subheading_done");

        screen_2_picture_sc2_1.setAttribute("class","screen_2_picture_sc2_1 screen_2_picture_sc2_1_done");

        screen_2_picture_sc2_2.setAttribute("class","screen_2_picture_sc2_2 screen_2_picture_sc2_2_done");

    }else{screen2_heading.setAttribute("class","screen_2_heading screen_2_heading_init");

    screen2_subheading.setAttribute("class","screen_2_subheading screen_2_subheading_init");

    screen_2_picture_sc2_1.setAttribute("class","screen_2_picture_sc2_1 screen_2_picture_sc2_1_init");

    screen_2_picture_sc2_2.setAttribute("class","screen_2_picture_sc2_2 screen_2_picture_sc2_2_init");

    }console.log(screen_2_picture_sc2_2.getAttribute("class"));

}

这里我搞不懂为什么火箭动画会先出现了，然后过一会儿又执行动画了