html加竖线缩小就消失,我用animation请教大牛如何让竖线在刚开始不显示出来

无标题文档

.box{ width:500px;

height:2000px;

border:1px;

margin:0 auto;

position:relative;}

.a{

width: 100px;

height: 100px;

background: #06F;

border-radius: 50%;

position: absolute;

left: 192px;

top: 317px;

transition: all 1s;

animation: a ease-in-out 1s;

opacity:1;

}

.line{

width: 10px;

height: 100px;

position: absolute;

background: #AAA;

left: 238px;

top: 418px;

transition: all 1s;

animation: b ease-in-out 2s ;

animation-delay:1s;

opacity:1;

}

@keyframes a{

0%{ opacity:0;}

100%{ opacity:1;}

}

@keyframes b{

0%{ height:0;

opacity:0;}

100%{ height:100px;

opacity:1;}

}