<!DOCTYPE html>
<html>
  <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    body {
    background-color:cyan;
      padding: 30px;
    }
 
    #spriteContainer {
      width: 500px;
      height: 800px;
      display: block;
     background-image: url("https://img.freepik.com/free-vector/south-african-boy-running_1308-18373.jpg?t=st=1730063041~exp=1730066641~hmac=d764412a0772151f342959e2a6ac5e4d781f62070a72c25c650c716b3a67fd4c&w=740");
          animation: sprite .75   steps(10) infinite;
      animation: sprite .75s steps(10) infinite;
    }
 
    @keyframes sprite {
     100% {
       background-position: -17224px; 
</style>
     
<head>
  <title>CSS Sprite Animation</title>
  <body>
    <div id=spriteContainer></div>
  </body>
  </html>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.