CSS Background animation: moving image top to bottom constantly

Question

I'm trying to make a background animation where some clouds come from top to bottom constantly. I'd like to have the effect, when the images begins to desapear from the bottom of the viewport, the same image starts appering again above. Like a carrousel, the only difference is that not horizontal but vertical.

I've managed to setup an animation but the problem is, the image desapers completely from viewport before it starts showing up again on top and then going down. In between a have a blank space. I'm doing something wrong but can't figure out what.

Here is my code sofar. Please be patiente with me cause I'm a newbee :) Thank you!

https://codepen.io/Martschioo/pen/eYdqdzE

*{
margin: 0;
padding: 0;
box-sizing: border-box;}

main {
background: linear-gradient(57deg, #4568dc, #b06ab3);
height: 100vh;
width: 100%;
position: relative;
overflow: hidden;}

.clouds{
height: 100vh;
width: 100%;
display: block;
background: url("../img/clouds.svg");
position: absolute;
z-index: 1;
animation: clouds 5s linear infinite;
background-repeat: repeat-y;}

@keyframes clouds{

100%{
    transform: translateY(100%);
    }

}

question from:https://stackoverflow.com/questions/65902015/css-background-animation-moving-image-top-to-bottom-constantly

Answer 1

You need to start from transform: translateY(-100%);

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

main {
  background: linear-gradient(57deg, #4568dc, #b06ab3);
  height: 100vh;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.clouds {
  height: 100vh;
  width: 100%;
  background: url("https://artworkn.com/img/clouds.svg");
  position: absolute;
  animation: clouds 5s linear infinite;
  background-repeat: repeat-y;
}

@keyframes clouds {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(100%);
  }
}

<main>
    <section class="clouds"></section>
  </main>