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!)
It takes just a few tricky lines of CSS in order to turn this static sprite sheet into this animated sprite:
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>
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)
}
}
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;
}
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;
}
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>
Top comments (1)
The method you've described is straightforward and effective for simple use cases.
However, if you're looking to develop games, particularly in Unity, you might want to consider Unity sprite animation tools or even third-party tools like Spine for more complex animations.
For complex animations, consider rigging your character with bones. This can simplify the animation process and make the animations look more natural.
Especially for mobile games, keep an eye on performance. Use sprite atlases in Unity to reduce draw calls and optimize your game's performance.