<div class="mground">
  <div class="walker"></div>
</div>
<div class="bgd">
</div>

<div class="cloud"></div>


.walker {
  animation: walk-cycle 0.8s steps(4) infinite;
  background: url(https://lh3.googleusercontent.com/-LSdGlGSNbgs/XKnvc8dkPRI/AAAAAAABAgY/LkXPIbwMEvk6-URU4Alg5LBuvpPZwJxsQCK8BGAs/s0/2019-04-07.png) 0 0 no-repeat; 
  height: 75px;
  width: 46px;
  transform: rotate(20deg);
  position: absolute;
  bottom: -10px;
  left: 95%;
  margin-left: -200px;
  transform: scale(0.5);/* offers a bit of a performance boost by pushing some of this processing to the GPU in Safari*/
}

@keyframes walk-cycle {  
  0% {background-position: 0 0; } 
  100% {background-position: 0 -300px; } 
}
.mground, .bgd, .cloud 
{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0; left: 0;
  translate3d(0,0,0); 
}

.cloud {
  animation: cl linear 1500s infinite both;
  background:  url(https://lh3.googleusercontent.com/-oQgi-8ba1VI/XKoHJN8VSAI/AAAAAAABAi4/rHtb6ZpIOL026FkufDm_fYBqNbltbnNRACK8BGAs/s0/2019-04-07.png) 0 100% repeat-x;
  z-index: -10;
  top: 30px;
}

@keyframes cl {  
  0% { background-position: -3584px 100%;} 
  100% {background-position: 0 100%; } 
}

.mground {
  animation: mg linear 400s infinite;
  background:  url(https://lh3.googleusercontent.com/-5QpXz3F9b18/XKngDYOPdVI/AAAAAAABAfU/UazAavSMv1wGWn--uFJUDWjlPrrb6tiFACK8BGAs/s0/2019-04-07.png) 0 100% repeat-x;
  z-index: 2;
}

@keyframes mg {  
  0% { background-position: -3000px 100%;} 
  100% {background-position: 0 100%; } 
}

.bgd {
  background-image:
    url(https://lh3.googleusercontent.com/-HTJCYVvwYxU/XKn37fB8viI/AAAAAAABAhI/CxK50jtAndIs3sXzxd7NNmndem1_WgyJgCK8BGAs/s0/2019-04-07.png),
    url(https://lh3.googleusercontent.com/-64AK4o2UEPM/XKn78jpEjPI/AAAAAAABAiQ/kH_ys8o2iHMWtbwLwdkOFwMllNcuermawCK8BGAs/s0/2019-04-07.png_);
  
  background-repeat: repeat-x;
  background-position: 0 100%;
  z-index: 1;
  animation: parallax_bg linear 800s infinite;
}

@keyframes parallax_bg {
  100% { background-position-x: 4400px, 2000px;}
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.