Controlling CSS3 Animation with steps() Function

Animation is one of the greatest features introduced to CSS. In the past, web animation was only available in the JavaScript or Flash territory. But, today, many websites opt to use CSS for adding subtle animation. In previous articles, we have gone through how to do some cool things with CSS animation like adding a marquee effect and adding bounce effect to something.

In this article, we will once again dive into CSS animation. This time, we are going to discuss a CSS animation function, steps(), that enables us to control the animation’s movement — don’t freak out, it’s not as puzzling as it sounds. Let’s take a look.

Recommended Reading: 38 Inspiring CSS3 Animation Demos

So what is it?

Normally, the animation in CSS will go straight from start to end at the specified duration. steps() is part of the animation timing function. It allows us to control the animation to move gradually. The very best example that shows how the steps() works would be the second hand of an analog clock; 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().

Replicating the Second Hand of a Clock

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). Note that the following code may need a prefix (-moz-, -o-, and -ms-) in order to work across browsers.

 @-webkit-keyframes rotation from transform: rotate(90deg); to transform: rotate(450deg);

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

 .second animation: rotation 60s steps(60) infinite; transform-origin: 100% 50%; //styles decoration background-color: #e45341; height: 2px; margin-top: -1px; position: absolute; top: 50%; width: 50%;

We have created two demos for this; one with steps() and one with linear. You can see the different moves from this screenshot below.

At this point, hopefully, you can figure out and imagine how steps() works. To see the demo in action, follow this link below.

View Demo

Download Source

More Inspiration…

In addition, 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.