CSS Background animation: moving image top to bottom constantly

user_13266632 0
Viewed 55

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

}

animation css
2 Answers

Your code is in parts good, only missing part is the 0% keyframe where it all starts to make the transition smooth. You want to make sure it is the image height which is the bottom of the image is at the top of the viewport, in this case 100vh.

@keyframes clouds{
  0%{
     transform: translateY(-100vh);
  }
  100%{
     transform: translateY(110%);
  }
}
user_11019300

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>

You can also do like below:

body {
  background: linear-gradient(57deg, #4568dc, #b06ab3);
  height: 100vh;
  margin:0;
}

body::before {
  content:"";
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:200%;
  background: url("https://artworkn.com/img/clouds.svg") center/auto 50%;
  animation: clouds 3s linear infinite;
}

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

user_86203330
Related