<section class="animation-section">
      <h1>
        Character Animation with Parallax Background using HTML & CSS
      </h1>
      <div class="animation-section_character">
        <img class="animation-section_character-sprites" src="https://i.imgur.com/HMaBaHf.png" alt="walking animation">
      </div>
  </section>
* {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto; 
}

h1 {
  margin-top: 20px;
  color: rgb(255, 255, 255);
  font-size: 2.5em;
  text-align: center;
  width: 100vw;
  height: 50px;
  position: relative;
}

h1::before {
  content: "";
  position: absolute;
  left: 0;
  background-color: black;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  z-index: -1;
}  

.animation-section {
  height: 200px;
  width: 5120px;
  position: relative;
}

.animation-section_character {
  margin-top: 35px;
  width: 64px;
  height: 64px;
  position: relative;
}

.animation-section_character-sprites {
  position: absolute;
  animation: walking-animation  1s steps(8) infinite;
  image-rendering: pixelated; /* For Chrome */
  image-rendering: crisp-edges; /* For Firefox */
}

 .animation-section::before {
  content: "";
  background-image: url(https://i.imgur.com/y7eQmZA.png);
  position: absolute;
  width: 100%;
  height: 100%;
  animation: bg-animation 20s linear infinite;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
}

.animation-section::after {
  content: "";
  background-image:
    url(https://i.imgur.com/2eqnBIk.png),
    linear-gradient(0deg, rgba(64,59,59,1) 15%, rgba(2,8,17,1) 100%);
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  animation: bg-animation 100s linear infinite;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  opacity: 0.5;
}


@keyframes bg-animation {
  to {
    transform: translateX(-2560px);
  }
}

@keyframes walking-animation {
  from { 
    transform:translateX(0);
  }
 
  to {
    transform: translateX(-512px);
  }
   
 }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.