无限水平重复SVG

Question

I am looking to create an infinite (repeating) animation of a car going horizontally, with landscape (different layers, SVG) passing by.

I couldn't find how to repeat my SVG landscape layers along the X-axis so when I play the animation, it just keeps repeating.

My animation is done with CSS keyframes and translateX (not sure if it's the best solution though).

Answer 1

The idea here is that you wish to 'mimic' the background into repeating. I'm not sure this is the best solution, it's just one that I have used in the past and am very fond of.

First, we'll duplicate the background svg with the same properties and call it #back instead of #front .

keyframes frontScroll {
    from {transform: translateX(0);}
    to {transform: translateX(100%);}
}
keyframes backScroll {
    from {transform: translateX(-100%);}
    to {transform: translateX(0%);}
}

Next, we're setting another animation that has exactly the same properties, except it moves from -100% to 0% while the original one goes from 0% to 100%`.

If we all wrap it together, the following happens:

 body { margin : 0; overflow : hidden; } #front { position : absolute; left :0; right:0; bottom:0; z-index : 9; -webkit-animation: frontScroll 2.5s linear infinite; animation: frontScroll 2.5s linear infinite; } #back { position: absolute; bottom: 0; right: 0; left: 0; z-index: 9 -webkit-animation: backScroll 2.5s linear infinite; animation: backScroll 2.5s linear infinite; } keyframes frontScroll { from {transform: translateX(0);} to {transform: translateX(100%);} } @-webkit-keyframes frontScroll { from {transform: translateX(0);} to {transform: translateX(100%);} } keyframes backScroll { from {transform: translateX(-100%);} to {transform: translateX(0%);} } @-webkit-keyframes backScroll { from {transform: translateX(-100%);} to {transform: translateX(0%);} } 

 <div id="back"> <?xml version="1.0" encoding="utf-8"?> <svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1200 313.9" xml:space="preserve"> <style type="text/css"> .st0{fill:#602700;} </style> <g id="XMLID_171_"> <g id="XMLID_173_"> <g id="XMLID_193_"> <g id="XMLID_202_"> <path id="XMLID_203_" class="st0" d="M833.9,230.9l-25.9-3.7c0,0,0,0,0,0l-204.6,28c0,0,0,0,0,0l-160.5-3.8l-162.3,3.8 c0,0,0,0,0,0L200,240.8c0,0,0,0,0,0L0,241.5c0,0,0,0,0,0v72.4c0,0,0,0,0,0H1200c0,0,0,0,0,0l0-109.9c0,0,0,0,0,0l-200-25.2 c0,0,0,0,0,0L833.9,230.9C833.9,230.9,833.9,230.9,833.9,230.9z"/> </g> <path id="XMLID_200_" class="st0" d="M258.3,120.9V133c0,10.5,4.6,20,11.9,26.8c7.6,7,12.1,16.4,12.1,26.5v81c0,0,0,0,0,0h28.9 c0,0,0,0,0,0v-81c0-10.1,4.5-19.5,12.1-26.5c7.3-6.7,11.9-16.3,11.9-26.8v-32.2c0-5.8-5.3-10.4-11.5-9.5c-5,0.7-8.5,5-8.5,9.8 V133c0,6.3-3.4,11.8-8.5,14.9c0,0,0,0,0,0V79.6c0-4.8-3.6-9.2-8.5-9.8c-6.2-0.8-11.5,3.7-11.5,9.5v68.5c0,0,0,0,0,0 c-5.1-3.2-8.5-8.7-8.5-14.9V14.4c0-4.8-3.6-9.2-8.5-9.8c-6.2-0.8-11.5,3.7-11.5,9.5v83.6c0,0,0,0,0,0c-7.9-1-14-7.4-14-15.3V26.6 c0-3.2-2.5-6-5.8-6c-3.4-0.1-6.2,2.5-6.2,5.8v56.1c0,11,6.9,20.5,16.8,24.7C254.7,109.5,258.3,115,258.3,120.9z"/> <path id="XMLID_199_" class="st0" d="M657.7,257.6h27.9c0,0,0,0,0,0v-69.3c0-8.9,4.6-17.2,12.1-22.4c10.9-7.7,18-20.2,18-34.2 l0-86.8c0-4.2-3.1-8-7.4-8.6c-5.4-0.7-10,3.3-10,8.3v87.1c0,11.2-7.5,20.8-18,24.3c0,0,0,0,0,0V8.7c0-4.2-3.1-8-7.4-8.6 c-5.4-0.7-10,3.3-10,8.3v147.5c0,0,0,0,0,0c-10.5-3.5-18-13.1-18-24.3V76.9c0-4.2-3.1-8-7.4-8.6c-5.4-0.7-10,3.3-10,8.3v55 c0,14,7.1,26.5,18,34.2c7.5,5.3,12.1,13.5,12.1,22.4L657.7,257.6C657.7,257.6,657.7,257.6,657.7,257.6z"/> </g> </g> </g> </svg> </div> <div id="front"> <?xml version="1.0" encoding="utf-8"?> <svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1200 313.9" xml:space="preserve"> <style type="text/css"> .st0{fill:#602700;} </style> <g id="XMLID_171_"> <g id="XMLID_173_"> <g id="XMLID_193_"> <g id="XMLID_202_"> <path id="XMLID_203_" class="st0" d="M833.9,230.9l-25.9-3.7c0,0,0,0,0,0l-204.6,28c0,0,0,0,0,0l-160.5-3.8l-162.3,3.8 c0,0,0,0,0,0L200,240.8c0,0,0,0,0,0L0,241.5c0,0,0,0,0,0v72.4c0,0,0,0,0,0H1200c0,0,0,0,0,0l0-109.9c0,0,0,0,0,0l-200-25.2 c0,0,0,0,0,0L833.9,230.9C833.9,230.9,833.9,230.9,833.9,230.9z"/> </g> <path id="XMLID_200_" class="st0" d="M258.3,120.9V133c0,10.5,4.6,20,11.9,26.8c7.6,7,12.1,16.4,12.1,26.5v81c0,0,0,0,0,0h28.9 c0,0,0,0,0,0v-81c0-10.1,4.5-19.5,12.1-26.5c7.3-6.7,11.9-16.3,11.9-26.8v-32.2c0-5.8-5.3-10.4-11.5-9.5c-5,0.7-8.5,5-8.5,9.8 V133c0,6.3-3.4,11.8-8.5,14.9c0,0,0,0,0,0V79.6c0-4.8-3.6-9.2-8.5-9.8c-6.2-0.8-11.5,3.7-11.5,9.5v68.5c0,0,0,0,0,0 c-5.1-3.2-8.5-8.7-8.5-14.9V14.4c0-4.8-3.6-9.2-8.5-9.8c-6.2-0.8-11.5,3.7-11.5,9.5v83.6c0,0,0,0,0,0c-7.9-1-14-7.4-14-15.3V26.6 c0-3.2-2.5-6-5.8-6c-3.4-0.1-6.2,2.5-6.2,5.8v56.1c0,11,6.9,20.5,16.8,24.7C254.7,109.5,258.3,115,258.3,120.9z"/> <path id="XMLID_199_" class="st0" d="M657.7,257.6h27.9c0,0,0,0,0,0v-69.3c0-8.9,4.6-17.2,12.1-22.4c10.9-7.7,18-20.2,18-34.2 l0-86.8c0-4.2-3.1-8-7.4-8.6c-5.4-0.7-10,3.3-10,8.3v87.1c0,11.2-7.5,20.8-18,24.3c0,0,0,0,0,0V8.7c0-4.2-3.1-8-7.4-8.6 c-5.4-0.7-10,3.3-10,8.3v147.5c0,0,0,0,0,0c-10.5-3.5-18-13.1-18-24.3V76.9c0-4.2-3.1-8-7.4-8.6c-5.4-0.7-10,3.3-10,8.3v55 c0,14,7.1,26.5,18,34.2c7.5,5.3,12.1,13.5,12.1,22.4L657.7,257.6C657.7,257.6,657.7,257.6,657.7,257.6z"/> </g> </g> </g> </svg> </div> 

Now we can easily position a car or something on top of the land and voila, an never-ending driving car.