Create a Simple Sprite Animation with CSS
Tags: css, html, animation, sprite
Published: 2021-02-16 06:29:32

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](https://www.piskelapp.com/) 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8ylcuzq40uahw9ny2j6y.png)

It takes just a few tricky lines of CSS in order to turn this *static sprite sheet* into this *animated sprite*:  
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/czls30vwei5evhhzsd5h.gif)

###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`.
```html
<!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>
```
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:
```CSS
@keyframes moveSpritesheet {
 from {
      transform: translate(0px,0)
  }
  to {
      transform: translate(-100%,0)
  }
}
```
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:
```CSS
 .character-spritesheet {
   animation: moveSpritesheet 1s steps(4) infinite;
 }
```
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! 
```CSS
.character {
  width: 320px;
  height: 320px;
  overflow: hidden;
  position: relative;
}
```
###References
[piskelapp.com](https://www.piskelapp.com/) - Pixel Art Creation Tool
[CSS @keyframes](https://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp)
[CSS transform: translate](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate())
[CSS position](https://www.w3schools.com/css/css_positioning.asp)

**Video**
[Drew Conley](https://www.youtube.com/channel/UCvQwAK9oAYXM0RMucLy2-BA) 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.
{% youtube ekI7vjkFrGA %}

###Full Code
```HTML
<!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>
```