# CSS only sprite animations

DevFeed: [CSS only sprite animations](<https://devfeed.tech/articles/css-only-sprite-animations-37258.md>)

Original publisher: [Read original article](<https://muffinman.io/blog/css-only-sprite-animations/>)

Author: Stanko

Published: 2019-07-05T00:00:00Z

Content type: tutorial

Language: en

Sources: [Stanko Tadić](<https://devfeed.tech/sources/stanko-tadic.md>)

Topics: [CSS](<https://devfeed.tech/topics/css.md>), [CSS animations](<https://devfeed.tech/topics/css-animations.md>), [web animation](<https://devfeed.tech/topics/web-animation.md>), [Code](<https://devfeed.tech/topics/code.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>)

Tags: [animations](<https://devfeed.tech/tags/animations.md>), [code](<https://devfeed.tech/tags/code.md>), [css](<https://devfeed.tech/tags/css.md>), [css-animations](<https://devfeed.tech/tags/css-animations.md>), [pixel](<https://devfeed.tech/tags/pixel.md>)

## AI overview

A tutorial on creating sprite and frame-by-frame animations using CSS only. It compares separately animated frames with a single parent animation using the steps() timing function, and demonstrates the technique with a retro text loader and pixel-art images.

## Source excerpt

I haven't published anything in a while, which is a shame because I have a couple of good things to write about. That said, today's post is going to be a short one. I wasn't sure if theme is interesting enough. But in the end I decided to write it anyway. And it will help me get back in the writing shape. While setting up a new project on Netlify, I was going through the logs and noticed they are using old schoolAs far as I know people started using it back in the 80s. text only loader. It is a very simple animation swapping between four text characters (--, \, |, /). Haven't even checked if they are using gif or not, but immediately tried recreating it using CSS only. The first version # The first thing I tried was to stack frames one of top of the other, and then animate every frame separately. Animation will make element visible only for the duration of one frame. Then using animation-delay we can adjust each frame. Code for four frames looked something like this: $frame-duration: 125ms; @keyframes frame-animation { 0%, 25% { opacity: 1; } // Make opacity transition from 1 to 0 as short as possible 25.01% { opacity: 0; } } // Add delay for each frame @for $i from 1 through 4 { .Animation-frame:nth-child(#{ $i }) { animation-delay: 250ms * ($i - 1); } } This worked well for our retro loader with four frames. Then I tried to animate images in the same way and again it worked fine. Applying common hacks to activate hardware acceleration didn't help, so I went back to the drawing board. Animation steps to the rescue # First order of business was to try to remove animations for individual frames, and use only one on the parent element. And to do it without JavaScript. Something like a slider, where slides are swapped without animation. Then it hit me! I remembered seeing that CSS animations can use steps. So I searched for it and found out the syntax: animation-timing-function: steps(4); What MDN says about steps: Displays an animation iteration along n stops along the