SVG Seamless Loop
Hi I am trying to do some animations for a project in my web development class. I'm trying to create the illusion that the car is moving down the street when the street and some mountains are moving horizontally in an infinite loop, but I also need the photo to repeat. I found how to do this with {background-position} but I can't get the photo to scroll smoothly without missing any suggestions?
body {
background-color: rgb(59, 193, 236);
}
#Mountains {
transform: translate(-8px, -400px);
animation: slide 2s linear infinite;
}
@keyframes slide {
from {
transform: translate(-8px, -400px);
}
to {
transform: translate(1109px, -400px);
}
}
<div id="Mountains">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1109" height="1500" viewBox="0 0 2100 1500">
<metadata><?xpacket begin="" id="W5M0MpCehiHzreSzNTczkc9d"?>
<x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="Adobe XMP Core 5.6-c138 79.159824, 2016/09/14-01:09:01 ">
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
<rdf:Description rdf:about=""/>
</rdf:RDF>
</x:xmpmeta>
<?xpacket end="w"?></metadata>
<image y="316" width="2100" height="1184" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAACDQAAASgCAMAAAA63XraAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAC+lBMVEVirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAcAAABEFMKVAAAA/HRSTlMADh4tPExba3iIkpmaqrO7x8zZ3d/u3MGj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AAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAyP8H5b63vEwYaTcAAAAASUVORK5CYII="/>
</svg>
</div>
+3
source to share
2 answers
I don't have a solution with just one SVG. But if you can wrap two images (not necessarily the same) in a container, it's easy to do a repeating animation using the animation-delay property on the second image.
See example: https://jsfiddle.net/kxo7g714/
.mountains {
position: absolute;
top: 0;
left: 0;
transform: translate(-150px, 50px);
animation: slide 4s linear infinite;
}
.mountains.two {
animation-delay: -2s;
}
0
source to share
If you can only use one image, duplicate its content inside the image itself. This example uses different colors to illustrate how the paths are essentially the same.
https://jsfiddle.net/crvpenfo/2/
@keyframes slide {
from {
transform: translate(0, 50px);
}
to {
transform: translate( "NegativeHalfWidth" , 50px);
}
}
0
source to share