{"id":21756,"date":"2014-07-29T15:01:04","date_gmt":"2014-07-29T07:01:04","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=21756"},"modified":"2025-04-24T17:16:01","modified_gmt":"2025-04-24T09:16:01","slug":"css3-animation-steps","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/css3-animation-steps\/","title":{"rendered":"Controlling CSS3 Animation with steps() Function"},"content":{"rendered":"

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<\/strong>. In previous articles, we have gone through how to do some cool things with CSS animation like adding a marquee effect<\/a> and adding bounce effect<\/a> to something.<\/p>\n

In this article, we will once again dive into CSS animation. This time, we are going to discuss a CSS animation function, steps()<\/code>, that enables us to control the animation\u2019s movement<\/strong> \u2014 don\u2019t freak out, it\u2019s not as puzzling as it sounds. Let\u2019s take a look.<\/p>\n

Recommended Reading<\/strong>: 38 Inspiring CSS3 Animation Demos<\/a><\/p>\n

So what is it?<\/h2>\n

Normally, the animation in CSS will go straight from start to end at the specified duration. steps()<\/code> 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()<\/code> works would be the second hand<\/strong> of an analog clock; the clock\u2019s second hand does not move continuously, instead its movements are split into stages. So let\u2019s replicate it with CSS animation and steps()<\/code>.<\/p>\n

Replicating the Second Hand of a Clock<\/h2>\n

Let\u2019s first add the keyframes that will rotate the second hand for 360 degrees; the rotation will start at 90 degrees (or at 12 o\u2019clock). Note that the following code may need a prefix (-moz-<\/code>, -o-<\/code>, and -ms-<\/code>) in order to work across browsers.<\/p>\n

\n@-webkit-keyframes rotation {\n    from {\n        transform: rotate(90deg);\n    }\n    to {\n        transform: rotate(450deg);\n    }\n}\n<\/pre>\n
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<\/code> and this tells the browser to complete it in 60 steps with steps(60)<\/code> like so.<\/p>\n
\n.second {\n    animation: rotation 60s steps(60) infinite;\n    transform-origin: 100% 50%;\n\n    \/* styles decoration *\/\n    background-color: #e45341;\n    height: 2px;\n    margin-top: -1px;\n    position: absolute;\n    top: 50%;\n    width: 50%;\n}\n<\/pre>\n
We have created two demos for this; one with steps()<\/code> and one with linear<\/code>. You can see the different moves from this screenshot below.<\/p>\n
\"CSS<\/figure>\n<\/p>\n
At this point, hopefully, you can figure out and imagine how steps()<\/code> works. To see the demo in action, follow this link below.<\/p>\n
\n    View Demo<\/a>\n    Download Source<\/a>\n<\/div>\n
More Inspiration\u2026<\/h2>\n
In addition, here we have collected a few terrific experiments and demonstrations that exploit steps()<\/code> from many web developers. Check them out and I hope you can derive some inspiration from them.<\/p>\n