Black background slide up

Question

It is probably very simple but i'm stuck trying to make a homepage automatic background slider like here : https://www.jackdavison.co.uk

That's probably Jquery but I found a way to have something similar with html and Css, only it keeps repeating.

Any help ?

You can see my code here:

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

Thank you !

Answer 1

You just need a minor change in your CSS. Just change animation: slide 2s linear infinite; to animation: slide 0.6s ease-out forwards;. Also, I have changed in -2000px to 100% in @keyframes in case if you have a full-height background.

animation-fill-mode: forwards; Let your element retain the style values from the last keyframe when the animation ends.

.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>

Please let me know if this helps.

Answer 2

To stop the animation and keep the last state use:

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

Answer 3

Thank you all for the help the clean code is this one :

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