Я создал небольшую анимацию в CSS, чтобы повторить тот же эффект на этом веб-сайте . Нужно ли использовать анимацию-функцию-времени: cubic-bezier () для достижения того же эффекта? Похоже, что создатель веб-сайта продвигает границы, чтобы масштабировать и переводить изображение девушки. И более важной частью моей сборки является то, что она оставляет пустое пространство внизу, которое не будет хорошо смотреться на правильной веб-странице. Я уверен, что это из-за моего перевода (-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;
}
вот мой кодекс