Creating GIF-like Animations with CSS
I learned how to do this through a blog post written by Guil Hernandez.
I’ve been using animated sprite sheets on my personal website and the entire animation is being done through CSS. Here are the steps I followed.
1. Creating a Sprite Image
The first thing I did was to create a vector image of the image I wanted to animate. I did this using Affinity Designer, but you can do this in any vector graphic program.
I ended up creating 10 unique vectors that were evenly spaced out and then exported the file as a PNG. You can use as many different vectors as you’d like, just make sure that you align them all on the same horizontal plane.
I exported the file with dimensions of 1000 x 40 pixels.
2. Adding an Empty HTML Element
Add an empty div element on your page with an id or class attribute that you can use when targeting the element in your stylesheet.
3. Adding the CSS
Now all you’ve got to do is add the following lines of CSS in your stylesheet and make sure to customize it for your image.
The height of your image should match the dimension of your exported image. The width can be calculated by taking your image width dimension and dividing it by the number of frames that are in your image. In my case, that would be 1000/10 = 100 pixels.
The animation property is where you specify how many frames are in your sprite image (put this as the argument inside of steps). The time value you provide the animation property determines how fast your animation will cycle through the sprite image’s frames.
Finally, make sure that the background-position property within @keyframes play matches the total length of your sprite image.
And there you have it! Give it a try with your own images.
