css 애니메이션 참고 svg 이미지

by hohoya33

HTML

http://makeyourmoneymatter.org/  

<section id="preloader" style="position: fixed;width:100%;height:100%;top:0;overflow: hidden;background-color: #A7A34A;background-color:#A7A34A">
  
	  <div class="s-animContainer">
		<div class="s-sky anim-scrollSky"></div>
		<div class="s-back_mountain anim-scrollBackMountain"></div>
		<div class="s-mountain anim-scrollMountain"></div>
		<div class="s-town anim-scrollTown"></div>
		<div class="s-road"></div>
	  </div>
    <div class="s-frame"><div class="s-copy">Loading - 0%</div></div>

  
  
  </section>

CSS

html,body{height:100%;margin:0;overflow:hidden}
@-webkit-keyframes scrollMountain{0%{background-position:0px 0px}100%{background-position:542px 0px}}
@-moz-keyframes scrollMountain{0%{background-position:0px 0px}100%{background-position:542px 0px}}
@keyframes scrollMountain{0%{background-position:0px 0px}100%{background-position:542px 0px}}
.anim-scrollMountain{-webkit-animation:scrollMountain 12s linear infinite normal;-moz-animation:scrollMountain 12s linear infinite normal;-ms-animation:scrollMountain 12s linear infinite normal;animation:scrollMountain 12s linear infinite normal}

@-webkit-keyframes scrollBackMountain{0%{background-position:0px 0px}100%{background-position:600px 0px}}
@-moz-keyframes scrollBackMountain{0%{background-position:0px 0px}100%{background-position:600px 0px}}
@keyframes scrollBackMountain{0%{background-position:0px 0px}100%{background-position:600px 0px}}
.anim-scrollBackMountain{-webkit-animation:scrollBackMountain 20s linear infinite normal;-moz-animation:scrollBackMountain 20s linear infinite normal;-ms-animation:scrollBackMountain 20s linear infinite normal;animation:scrollBackMountain 20s linear infinite normal}

@-webkit-keyframes scrollTown{0%{background-position:0px top}100%{background-position:630px top}}
@-moz-keyframes scrollTown{0%{background-position:0px top}100%{background-position:630px top}}
@keyframes scrollTown{0%{background-position:0px top}100%{background-position:630px top}}
.anim-scrollTown{-webkit-animation:scrollTown 5s linear infinite normal;-moz-animation:scrollTown 5s linear infinite normal;-ms-animation:scrollTown 5s linear infinite normal;animation:scrollTown 5s linear infinite normal}
@-webkit-keyframes scrollSky{0%{background-position:0px center}100%{background-position:291px center}}
@-moz-keyframes scrollSky{0%{background-position:0px center}100%{background-position:291px center}}
@keyframes scrollSky{0%{background-position:0px center}100%{background-position:291px...