关于第二屏火箭的问题

.screen-2__rocket_animation {
	-webkit-animation: rocket .8s 1.5s;
}

@-webkit-keyframes rocket {
	0% {
		transform: translate(0,100%);
		opacity: 1;
	}

	55% {
		transform: translate(0,-10%);
		opacity: 1;
	}
	70% {
		transform: translate(0,0);
		opacity: 1;
	}
	85% {
		transform: translate(0,-10%);
		opacity: 1;
	}
	100% {
		transform: translate(0,0);
		opacity: 1;	
	}
}

//滚动条设置
window.onscroll = function(){
	var top = document.body.scrollTop;
	console.log(top);

	if(top > 1){
		setScreenAnimateDone(".screen-1");
	}
	if(top > 1*640-100){
		var rocket = getElement(".screen-2__rocket");
		addCls(rocket,"screen-2__rocket_animation");
		setScreenAnimateDone(".screen-2");
	}
	if(top > 2*640-100){
		setScreenAnimateDone(".screen-3");
	}
	if(top > 3*640-100){
		setScreenAnimateDone(".screen-4");
	}
	if(top > 4*640-100){
		setScreenAnimateDone(".screen-5");
	}
}

火箭Css样式

.screen-2__rocket {
	width: 266px;
	height: 205px;
	background: url(../img/sc2-2.png) no-repeat center;
	position: absolute;
	left: 50%;
	margin-left: -30px;
	bottom: 100px;
	z-index: 2;
	opacity: 0;
}

请问为什么我这样设置之后，火箭每次出来动了之后就消失了，透明度又变为了0，请问这要怎么解决呢