Transparent Animations using CSS Steps()
I’ve recently started messing around with the
steps() timing property for CSS animation, it’s pretty slick. By default, animations in CSS will smoothly transition an element from its initial state to the final state continuously.
steps() allows us to specify the number of stops an animation should take between the start and end points, breaking the smooth animation into smaller, choppier chunks.
See the Pen CSS Step Animation (No Easing) by Dylan Baumann (@dylanbaumann) on CodePen.dark
In the above example we made an animation that widens an element from
width: 0; to
width: 100%;. The first green bar is using the default css animation timing property (
ease) and the second green bar is using
steps(5). This causes the animation progress to get divided into five equal parts, then applied like this:
As you can see, step animation is quick and choppy, which isn’t a quality that is normally sought after, but we can leverage it to create some interesting illusions.
Using Step Animations
We can use the choppiness to our advantage by speeding up the animation length and creating the illusion of motion. You might recognize this effect from old zoetropes, or literally any movie you’ve ever seen, ever. By creating a long image that contains a sequence of individual frames from an animation, we can recreate motion with the help of the
steps() animation timing property. To do this, find the number of frames in your animation, then use that as your
There is another optional value that we can to pass into the
steps() function which effects the animation’s direction.
startmakes it so the first step happens when the animation begins.
endmakes it so the last step happens when the animation finishes.
This is the default value.
In the example below, our film strip has 13 frames of the animation so we’ll set our value to
steps(13). We want the last frame to show when the animation finishes, which means we would pass through the
end value, but since it is the default value, there’s no need to declare it when creating our animation. This means
steps(13, end) is the exact same as
See the Pen CSS Step Animation (Zoetrope) by Dylan Baumann (@dylanbaumann) on CodePen.dark
Why use Steps?
Step animation is a versatile option for brining motion to your site or app. It shouldn’t be used for all animations, but can provide features other animation options can’t such as:
- Autoplay on mobile devices
- Upwards of 60 frames per second (depending on your animation frame count)
- Transparency support
- Smaller file size
It should be noted that while 60fps is achievable with step animation, it will drastically increase file size
Retina support for long animations will cause massive file bloat, however. Both high-fps and retina images work great for short bursts of animations, such as the Twitter Heart Explosion, but they don’t scale gracefully into complex animations.
If you need large or complex animations, be warned that while step animation is a viable option, you might want to also explore other implementations to make sure you’re getting the most performant method. Other options include:
- CSS Animation (non-step)
- SVG Animation (via JS or CSS)
- Embedded Video
- HTML Canvas
The best use of a complex step animation I’ve seen has come from Blizzard Entertainment’s promotional World of Warcraft: Legion expansion site. It illustrates an in-game characters wielding one of the weapons available in the game’s new expansion.
The animation is three seconds long and consists of 54 frames. The fascinating part is that the image is a 14,000px by 300px
.png file that only weighs 846kb. It is, by all means, a large file, but the quality of animation combined with mobile auto-playing and transparency support, is astonishing.
Here’s what the full film strip looks like:
What it looks like in action:
See the Pen CSS Step Animation by Dylan Baumann (@dylanbaumann) on CodePen.dark