I'm attempting to create an interesting visual effect where a background image moves horizontally and loops seamlessly, creating the illusion of an infinite loop of images.
Using only HTML and CSS, I've run into an issue where the background image gradually increases in size over time without any clear reason why. I suspect that JavaScript or jQuery may be needed to solve this problem, but as a novice in these languages, I find myself stuck and unable to make progress. Here's a link to a CodePen showcasing what I've been able to achieve so far:
https://codepen.io/Agnis/pen/aEQjPB
* {
margin: 0px;
padding: 0px;
}
body {
background-color: white;
}
@-webkit-keyframes backgroundAnimate {
from {
left: 0;
top: 0;
}
to {
left: -10000px;
top: -2000px;
}
}
@-moz-keyframes backgroundAnimate {
from {
left: 0;
top: 0;
}
to {
left: -10000px;
top: -2000px;
}
}
@-o-keyframes backgroundAnimate {
from {
left: 0;
top: 0;
}
to {
left: -10000px;
top: -2000px;
}
}
@keyframes backgroundAnimate {
from {
left: 0;
top: 0;
}
to {
left: -10000px;
top: -2000px;
}
}
...
<div id="back"></div>
<div id="front"></div>The goal is to have the background image move smoothly to the left without increasing in size, contrary to its current behavior. Any assistance would be greatly appreciated!