Черный фон скользит вверх

Question

Это, вероятно, очень просто, но я застрял, пытаясь сделать домашнюю страницу автоматизированной c фоновый слайдер, как здесь: https://www.jackdavison.co.uk

Это, вероятно, Jquery, но я нашел способ иметь что-то похожее с html и Css, только это повторяется.

Любая помощь?

Вы можете увидеть мой код здесь:

HTML

<div class="wrapper">
  <div class="sliding-background"></div>
</div>

CSS:

.wrapper {
  overflow: hidden;
}

.sliding-background {
  background-color: black; 
  height: 560px;
  width: 100%;
  animation: slide 2s linear infinite;
  animation-delay: 4000ms;
}

@keyframes slide{
  0%{
    transform: translate3d(0, 0, 0);

  }
  100%{
    transform: translate3d(0px, -2000px, 0px);

  }

}

См. На Codepen здесь

Спасибо!

Answer 1

Вам просто нужно небольшое изменение в CSS. Просто измените animation: slide 2s linear infinite; на animation: slide 0.6s ease-out forwards;. Кроме того, я изменил в -2000px на 100% в @keyframes в случае, если у вас есть фон в полный рост.

animation-fill-mode: forwards; Позвольте вашему элементу сохранить значения стиля из последнего ключевого кадра, когда анимация заканчивается.

.wrapper {
  overflow: hidden;
}

.sliding-background {
  background-color: black; 
  height: 560px;
  width: 100%;
  animation: slide 0.6s ease-out forwards;
  animation-delay: 2000ms;
}

@keyframes slide{
  0%{
    transform: translate3d(0, 0, 0);
  }
  100%{
    transform: translate3d(0px, -100%, 0px); 
  }
}

<div class="wrapper">
  <div class="sliding-background"></div>
</div>

Пожалуйста, дайте мне знать, если это поможет.

Answer 2

Спасибо всем за помощь, вот этот чистый код:

Html

<div class="wrapper">
  <div class="sliding-background"></div>
</div>

CSS

.wrapper {
  overflow: hidden;
}

.sliding-background {
  background-color: black; 
  width: 100%;
  height: 100vh;
  animation: slide 0.6s ease-out forwards;
  animation-delay: 2000ms;
}

@keyframes slide{
  0%{
    transform: translate3d(0, 0, 0);
  }
  100%{
    transform: translate3d(0px, -100%, 0px); 
  }
}

Answer 3

Для остановки анимации и сохранения последнего состояния используйте:

.sliding-background {         
     animation: slide 2s linear;
     animation-fill-mode: forwards;
}