关于第二屏的火箭动画

/* 第二屏动画 rocket不见了，是JS里样式名写错了*/
.screen-2__wrap__heading{
    transition: all 1s;
}
.screen-2__wrap__border,
.screen-2__wrap__subheading,
.screen-2__wrap__man{
    transition: all 1s .5s;
}

.screen-2__wrap__heading_animate_init,
.screen-2__wrap__border_animate_init,
.screen-2__wrap__subheading_animate_init,
.screen-2__wrap__roket_animate_init
{
    opacity: 0;
    transform: translate(0, 100%);
}
.screen-2__wrap__man_animate_init{
    opacity: 0;
}
.screen-2__wrap__heading_animate_done,
.screen-2__wrap__border_animate_done,
.screen-2__wrap__subheading_animate_done,
.screen-2__wrap__roket_animate_done
{
    opacity: 1;
    transform: translate(0,0);
}
.screen-2__wrap__man_animate_done{
    opacity: 1;
}
/* .screen-2__wrap__roket{   
    transition: all .5s 1.5s; 
} */
.screen-2__wrap__roket_animate_done{
    transition: all .5s 1.5s;
    animation: bounceInUp 1s 1.5s;
}

/* 小火箭抖动动画 */
@keyframes bounceInUp{
    0% { 
        opacity: 0;
        transform: translate(0, 100%);
    }
    60% { 
        opacity: 1;
        transform: translate(0, -20px);
    }
    75% {
        transform: translate(0, 10px);
    }
    90% {
        transform: translate(0, -5px);
    }
    100% {
        transform: translate(0, 0);
    }
}

1、为什么要写两个.screen-2__wrap__roket_animate_done来定义动画？好像我去掉第一个也没影响

2、.screen-2__wrap__roket_animate_done{ transition: all .5s 1.5s;  animation: bounceInUp 1s 1.5s;}

.screen-2__wrap__roket{   transition: all .5s 1.5s; }  为什么 transition: all .5s 1.5s;要定义在_animate_done中，不能定义在下面？

3、transition: all .5s 1.5s;  animation: bounceInUp 1s 1.5s;这两个属性的作用分别是什么，使用在哪里，互相不影响吗？能不能帮我把上面的代码修改到最精简啊？