I am trying to make an animation in javascript, where as the character is running, the grond should move as well. The problem that I have is that the ground image has an animation, but the image gets cut, and reapear.
I have this piece of code in css
.ground {
position: absolute;
bottom:0;
width: 100%;
height: 100px;
animation: ground-animation 20s infinite linear;
}
@keyframes ground-animation {
from {
right: -80px;
}
to {
right: 100%;
}
}
Just double the width of ground and repeat background image. No? https://codepen.io/ildar-meyker/pen/eYrdZyw
body {
margin: 0;
padding: 0;
overflow: hidden;
}
.ground {
position: absolute;
left: 0;
bottom: 0;
width: 200%;
height: 100vh;
animation: ground-animation 20s infinite linear;
background: url(https://i.pinimg.com/originals/8f/1a/b8/8f1ab8b14a55720d6859620a6f596933.jpg) repeat-x 0 100%;
background-size: 50% auto;
}
@keyframes ground-animation {
from {
}
to {
transform: translateX(-50%);
}