黑色背景向上滑动

Question

这可能非常简单，但是我被困在尝试制作主页自动背景滑块，例如：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);

  }

}

See on Codepen here

谢谢！

Answer 1

要停止动画并保持最后的状态使用：