DEV Community

loading...

Create a Simple Sprite Animation with CSS

mcardona9015
・3 min read

In order to create a simple sprite animation using nothing but HTML and CSS you will need to start with a sprite sheet of the sprite you would like to animate. You can either find resources online for free or paid sprite sheets, or create your own. Piskelapp is a handy website that allows you to create multiple frames of pixel art and import them as a single sprite sheet.

For demonstration purposes I created a simple character walking animation using Pixelapp and imported it in a 4x1 frame.(Please don't judge the terrible pixel art, I'm studying to be a programmer, not an artist!)

Alt Text

It takes just a few tricky lines of CSS in order to turn this static sprite sheet into this animated sprite:

Alt Text

HTML

To start we'll need some boilerplate HTML with a div in the body. We'll give that div a class of character. Within that div will be our sprite sheet img with a class of character-spritesheet.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sprite Animation</title>
</head>
<body>
    <div class="character"> 
        <img class="character-spritesheet" src="sample_sprite_sheet_large.png" alt="Character" />       
     </div>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

And that's all we'll need for the HTML!

CSS

In order to create the illusion of movement for our animation we will need to cycle through each frame of the sprite sheet in quick succession while having only one frame visible at a time.

The key to accomplishing this lies in creating a keyframe animation on the .character-spritesheet using transform: translate, while applying overflow: hidden to the container div .character.

Applying transform: translate to an image will make the image move across itself in the specified x and y axis. We want the image to start at the x position of 0 and move across itself 100%, so we create the @keyframes like so:

@keyframes moveSpritesheet {
 from {
      transform: translate(0px,0)
  }
  to {
      transform: translate(-100%,0)
  }
}
Enter fullscreen mode Exit fullscreen mode

Then we apply the animation to the .character-spritesheet, setting the speed we want to it to move, how many frames there are, and how long we want the animation to move:

 .character-spritesheet {
   animation: moveSpritesheet 1s steps(4) infinite;
 }
Enter fullscreen mode Exit fullscreen mode

The final key step to create the animation is to set the container .character div's height and width to match the size size of one frame of you animation(in our case '320px'), and to set overflow: hidden. Setting overflow to hidden is the key to the illusion of the animation; it tell the div to hide any part of an element within it that goes beyod the div's width and height. Since we set the .character div's size to be equal to only one frame of the animation, as the animation takes place all of the other frames will be hidden from view, creating the illusion of movement!

.character {
  width: 320px;
  height: 320px;
  overflow: hidden;
  position: relative;
}
Enter fullscreen mode Exit fullscreen mode

References

piskelapp.com - Pixel Art Creation Tool
CSS @keyframes
CSS transform: translate
CSS position

Video
Drew Conley has a great YouTube video where he walks through this process in much greater detail. It is worth a watch if you are interested in game design using purely HTML, CSS, and JavaScript.

Full Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sprite Animation</title>
</head>
<body>
    <div class="character"> 
        <img class="character-spritesheet" src="sample_sprite_sheet_large.png" alt="Character" />       
     </div>
     <style>
         .character {
        width: 320px;
        height: 320px;
        overflow: hidden;
        position: relative;
      }

      .character-spritesheet {
        animation: moveSpritesheet 1s steps(4) infinite;
      }

      @keyframes moveSpritesheet {
        from {
            transform: translate(0px,0)
        }
        to {
            transform: translate(-100%,0)
        }
      }
     </style>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Discussion (0)