Looking for a solution to eliminate white space post animation and translateY. Is setting body height to auto the answer? Does translateY result in a bottom margin or is it just body white space that can't be clicked on in inspect mode? Check out my code on CodePen. There seems to be white space after my last div, attached are my code snippets 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%);
}
}