How to get rid of white space below div after translateY

Question

I am trying to get rid of white space after I animate and translateY. Maybe setting the body height to auto? Does translateY leave a margin at the bottom or is that just the body white space, I can't click on it in inspect. Here is my code in a codepen . The white space is after my last div, I have attached my code and keyframes.

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

using position:absolute; in class orange will do the trick