如何去掉 translateY 后 div 下面的白色 space

Question

我试图在设置动画和翻译后摆脱白色 space。也许将身高设置为自动？ translateY 是在底部留下空白还是只是主体白色 space，我无法在 inspect 中单击它。这是我在 codepen 中的代码。白色的space在我最后的div之后，附上我的代码和关键帧。

body{
padding: 0;
margin: 0;
overflow-x: hidden;
}

.banner{
position: relative;
transform:  scale(1.5);
background: url(../image/splashing.jpg) center no-repeat;
background-size: cover;
background-attachment: fixed;
height: 100vh;

animation: slides 1s;
animation-delay:2s;
animation-iteration-count: 1;
animation-timing-function: cubic-bezier(0,0,0,1);
animation-fill-mode:forwards;
 -webkit-animation:slides 1s;
 -webkit-animation-delay:2s;
 -webkit-animation-iteration-count: 1;
 -webkit-animation-timing-function: cubic-bezier(0,0,0,1);
 -webkit-animation-fill-mode: forwards;
}

.header h1{
display: block;
position: absolute;
bottom: 15vh;
left: 0;
}

.header{
position: relative;
color: white;
opacity: 0;
animation: Fade 1s;
animation-delay: 3s;
animation-timing-function:  cubic-bezier(0,0,1,1);
animation-fill-mode: forwards;
animation-iteration-count: 1;

 -webkit-animation-iteration-count: 1;
 -webkit-animation: Fade 1s;
 -webkit-animation-timing-function: cubic-bezier(0,0,1,1);
 -webkit-animation-delay:3s;
 -webkit-animation-fill-mode: forwards;
z-index: 999;
}

.orange{
background-color: orange;
animation: up .5s;
animation-delay: 2s;
animation-fill-mode: forwards;
animation-timing-function: ease-in-out;
animation-iteration-count: 1;

-webkit-animation: up .5s;
-webkit-animation-delay: 2s;
-webkit-animation-fill-mode: forwards;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 1;
}

@-webkit-keyframes slides{
0%{
    -webkit-transform: scale(2,2);
}
100%{
    -webkit-transform: scale(1,1); 
}
}

@-webkit-keyframes Fade{
from{
    opacity: 0;
}
to{
    opacity: 1;
}
}

@-webkit-keyframes up{
from{
    -webkit-transform: translateY(0);
}
to{
    -webkit-transform: translateY(-30%);
}
}

Answer 1

使用position:absolute； class 橙色就可以了

如何去掉 translateY 后 div 下面的白色 space

How to get rid of white space below div after translateY

html

css

jquery-animate