Controlling CSS3 Animation with steps() Function: Tutorial

One of the greatest features introduced to CSS is the animation. Up to now, web animation was only accessible in the JavaScript or Flash territory. But, In the current state, many websites opt to use CSS for adding subtle animation. In prior commentaries, we have gone through a lot of stuff like how to do some cool things with CSS animation. For example, adding a marquee effect and adding bounce effect to something.

If you look clearly you would see there’s a little-known timing function in CSS animations that lets us break an animation into segments––or steps––instead of running it as one continuous animation from start to finish. This function is useful for creating sprite sheet animations because we’re able to precisely display each sprite image as a frame without any easing effects in between.

steps() function

steps() function

In this portion, we will once again dive into CSS animation. At this point, we are going to have a discussion on the CSS animation function, steps(), that enables us to control the animation’s movement — You might think it something to freak out about. But don’t. IT IS NOT. it’s not as puzzling as it sounds. Let’s start to see.

Animating with the steps() function

With steps() we’re able to control the amount of keyframes rendered in an animation’s duration; it progresses the animation in equidistant steps based on the value we set. Knowing this, let’s use steps() to create a simple character sprite sheet animation.

I used Illustrator artboards to create each animation frame as a separate 190×240 image, then took advantage of Compass’ sprinting feature to quickly generate a horizontal sprite sheet containing all the exported images.

Creating the animation

In order to animate our monster character, we’ll first create a rule where we define the width and height dimensions and display the main sprite sheet as a background image.


Moving on, we need to create a keyframe rule that animates the background position of the sprite sheet. The sprite sheet’s total width is 1900px, so let’s animate it right-to-left by giving it a final background position of -1900px.

Running the animation

At this point, when we bind the play animation sequence to the .monster selector with a duration of .8s, we see the background position of our sprite sheet quickly animating from left to right.

To achieve the desired frame-by-frame animation effect, we’ll need to include the steps() timing function in the animation value. Since the sprite sheet contains 10 image sprites, we can say that it’s made up of 10 frames––or steps. So let’s define 10 steps in our animation sequence:

Now the animation will run 10 frames in its .8s duration – it uses the background position animation to run through each sprite image as a step.

Finally, if we set animation-iteration-count to infinite, it will render a repeating loop of the animation.

To change the speed of the animation, simply change the animation-duration value.

So what is it?

Here comes the answer to all of your questions. Frequently, the animation in CSS will go straight from start to end at the specified duration. steps() is part of the animation timing function. It gives us the ability to control the animation to move gradually. The very best example that would show how the steps() works would be the second hand of an analog clock. Shocked? Let’s dig in some details. The clocks second-hand does not move continuously, instead, its movements are split into stages. So let’s replicate it with CSS animation and steps(). See? ain’t that complicated. More to go.

Replicating the Second Hand of a Clock

To begin with, let’s first add the keyframes that will rotate the Second Hand for 360 degrees; the rotation will start at 90 degrees (or at 12 o’clock). keep in mind that the following code may need a prefix (-Moz-, -o-, and -msg) in order to work across browsers.


Now if you look closely to the second hand it will move steadily every second and complete a 360-degree rotation in 60 seconds. Hence, here we will set the animation duration for the 60s and this tells the browser to complete it in 60 steps with steps(60) like so.



Now You Know
steps() function

steps() function

It is rather actually easier than it sticks on naked eyes. To add more, here we have collected a few terrific experiments and demonstrations that exploit steps() from many web developers. Check them out and I hope you can derive some inspiration from them.

That would be a wrap. I sincerely believe this had cleared all your confusion and mainly the myth everyone had regarding this. Feel free to use this on any of your projects. Paste away. Look smart.

For More Resources & Further Study, Check: