如何在没有空白的情况下进行动画处理

Question

为了在website上复制相同的效果，我在CSS中制作了一个小型动画。我是否需要使用animation-timing-function：cubic-bezier（）来达到相同的效果？似乎网站的创建者正在推动利润空间以缩放和翻译女孩的形象。而我的构建中最令人关注的部分是，它在底部留了一个空白，在适当的网页上看起来不太好。我确定这是因为我的translationY（-40％）。既然我不希望在我的最后一段内容和页脚之间有巨大的空隙，那么是否至少要为空白留出空间？

我搜索了动画边距，但这是不可能的。

.banner{
position: relative;
transform:  scale(2.0);
background: url(http://www.wallpaperbetter.com/wallpaper/1010/55/778/powder-colorful-splash-1080P-wallpaper.jpg) center no-repeat;
background-size: cover;
background-attachment: fixed;
height: 100vh;

animation: slides .7s;
animation-timing-function:ease-in-out;
animation-delay:2s;
animation-fill-mode:forwards;
animation-iteration-count: 1;
 -webkit-animation-iteration-count: 1;
 -webkit-animation:slides .7s;
 -webkit-animation-timing-function:ease-in-out;
 -webkit-animation-delay:2s;
 -webkit-animation-fill-mode: forwards;
transition: transform 500ms linear;
}

这是我的codepen