黑色背景向上滑动

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

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

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

Answer 2

您只需要对您的 CSS 做一个小改动。只需将 animation: slide 2s linear infinite; 更改为 animation: slide 0.6s ease-out forwards;。此外，如果您有全高背景，我已将 -2000px 中的 100% 更改为 @keyframes 中的 100%。

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 3

谢谢大家的帮助，干净的代码是这个：

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); 
  }
}

黑色背景向上滑动

Black background slide up

javascript

css

jquery

wrapper

slideup