Moving train using only CSS

HTML
<div class="wrapper"> <div class="background"></div> <div class="rocks_1"></div> <div class="rocks_2"></div> <div class="rails"></div> <div class="train"></div> <div class="ground"></div> <div class="lights"></div> <div class="moon"></div> </div>
CSS
body { margin: 0 !important; padding: 0 !important; overflow: hidden !important; } div { margin: 0 !important; padding: 0 !important; } .wrapper { height: 1080px; width: 1920px; margin: auto; background: #280744; overflow: hidden !important; } .background { height: 1080px; width: 1920px; background: url(https://docs.google.com/uc?export=download&id=0B2PO2Lr7Bv2QSXhkaG1VaEhSTjA ); background-repeat: repeat-x; background-position: top center; background-size: contain; } .rocks_1 { position: absolute; bottom: -5px; height: 315px; width: 1920px; background: url(https://docs.google.com/uc?export=download&id=0B2PO2Lr7Bv2QckJsSTBOSmdsYmc); background-repeat: repeat-x; background-position: top center; background-size: contain; animation: translateX 100s infinite linear both; } .rocks_2 { position: absolute; bottom: -60px; height: 315px; width: 1920px; background: url(https://docs.google.com/uc?export=download&id=0B2PO2Lr7Bv2QSC1sYnVUWUxKSGs); background-repeat: repeat-x; background-position: top center; background-size: contain; animation: translateX 30s infinite linear both; } .rails { position: absolute; bottom: -110px; height: 315px; width: 1920px; background: url(https://docs.google.com/uc?export=download&id=0B2PO2Lr7Bv2QZmtCbjlIbjVwclk); background-repeat: repeat-x; background-position: top center; background-size: contain; animation: translateX 5s infinite linear both; } .train { position: absolute; bottom: -105px; height: 315px; width: 1500px; right: 0px; background: url(https://docs.google.com/uc?export=download&id=0B2PO2Lr7Bv2QandQOVZSTjBETGs); background-repeat: no-repeat; background-position: top center; background-size: contain; } .ground { position: absolute; width: 1920px; height: 98px; bottom: 0px; background: #16012f; } .lights { position: absolute; bottom: -39px; height: 315px; width: 1920px; background: url(https://docs.google.com/uc?export=download&id=0B2PO2Lr7Bv2QNTJ1U2M1eFptSTA); background-repeat: repeat-x; background-position: top center; background-size: contain; animation: translateX 4s infinite linear both; } .moon { position: absolute; top: 20%; height: 315px; left: 200px; width: 120px; background: url(https://docs.google.com/uc?export=download&id=0B2PO2Lr7Bv2QRTVYeVFoYVppeUU); background-repeat: no-repeat; background-position: top center; background-size: contain; } @keyframes translateX { 0% {background-position: 0px 0px;} 100% {background-position: 1920px 0px;} }
JAVASCRIPT
Expand for more options Login