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:

  1. 20%
  2. 40%
  3. 60%
  4. 80%
  5. 100%

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 steps() count.

There is another optional value that we can to pass into the steps() function which effects the animation’s direction.

  • start makes it so the first step happens when the animation begins.
  • end makes 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 steps(13).

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. The same goes for applying retina support to long animations. 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.

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.

Edit: Blizzard Entertainment has since updated the design of the page, which unfortunately included removing their step animation elements.

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:

warlock-zoetrope

What it looks like in action:

See the Pen CSS Step Animation by Dylan Baumann (@dylanbaumann) on CodePen.dark