Curious how I did the animated “gifs” on the Sven Bømwøllen > a half-assed review post? Well, wonder no more.

The HTML is a simple div with a class

1

<div class="sven-1"></div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

.sven-1 {
	/* display rules and background general rules */
	display: block;
	background-repeat: no-repeat;
	background-position: 0px 0px;
	width: 92px;
	height: 74px;

	/* specific rules */
	background-image: url(//i.andrei.xyz/uploads/2023/sven-bomwollen/sven-hump-1.png);
	animation: sven1 steps(6) 0.6s infinite;
}
@keyframes sven1  {0% {background position: 0 0;}100% {background-position: 0 -448px;}}

The important things here are:

• div’s width and height: how big the frame is?
• background-image: the image that we’ll use for the animation
• steps(6): how many steps (frames) does the image have?
• animation duration: i used 0.6s. Actually it’s 0.1 per frame, so the animation looks very similar to the one in the game.
• background-position: we start from 0 0 (top left), and we end the animation at 0 -448px, meaning that the end frame will be 448 pixels below the origin. This can be tweaked if you need to alter the animation a bit, but it’s usually the height of the image.

This allowed me to turn this image