I want to add a CSS animation featuring clouds moving from left to right. In my design, I have a div with a 100% width containing cloud images styled with "position:absolute". My initial approach was simple: create an animation that gradually changes the "left" property of the image to 120%. However, this caused the issue of the clouds expanding the width of the entire HTML document once they crossed the full width.
Is there a way to avoid this and instead make the clouds vanish to the right after passing the 100% width mark? Appreciate any help on this!
EDIT: Here's a snippet of the CSS:
.header{
display:flex;
flex-direction:row;
height: 40em;
justify-content:center;
align-items:center;
width:100%;
overflow:hidden;
}
.cloud{
position:absolute;
left:-10%;
animation: cloud 10s linear infinite;
}
@keyframes cloud{
100%{
left:150%;
}
}