在translateY

Question

我在设置动画和translateY后试图摆脱空白。也许将车身高度设置为自动？是translateY在底部留有空白还是只是正文空白，我无法在检查中单击它。这是我在codepen中的代码。空白是在上一个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

使用位置：绝对；在课堂上，橙色将达到目的