Controlling CSS3 Animation with steps() Function

Animation is one of a biggest facilities introduced to CSS. In a past, web animation was usually accessible in a JavaScript or Flash territory. But, today, many websites opt to use CSS for adding pointed animation. In prior articles, we have left by how to do some cold things with CSS animation like adding a marquee outcome and adding rebound outcome to something.

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

Recommended Reading: 38 Inspiring CSS3 Animation Demos

So what is it?

Normally, a animation in CSS will go true from start to finish during a specified duration. steps() is partial of a animation timing function. It allows us to control a animation to pierce gradually. The really best instance that shows how a steps() works would be the second hand of an analog clock; a clocks second palm does not pierce continuously, instead a movements are separate into stages. So let’s replicate it with CSS animation and steps().

Replicating a Second Hand of a Clock

Let’s initial supplement a keyframes that will stagger a Second Hand for 360 degrees; a revolution will start during 90 degrees (or during 12 o’clock). Note that a following formula competence need a prefix (-moz-, -o-, and -ms-) in sequence to work opposite browsers.

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

The second palm will pierce usually each second and finish a 360 grade revolution in 60 seconds. Thus, here we will set a animation generation for 60s and this tells a browser to finish it in 60 stairs with steps(60) like so.

.second 
	animation: revolution 60s steps(60) infinite;
	transform-origin: 100% 50%;

	//styles decoration
	background-color: 
	height: 2px;
	margin-top: -1px;
	position: absolute;
	top: 50%;
	width: 50%;

We have combined dual demos for this; one with steps() and one with linear. You can see a opposite moves from this screenshot below.

At this point, hopefully, we can figure out and suppose how steps() works. To see a demo in action, follow this couple below.

• View Demo


• Download Source

More Inspiration…

In addition, here we have collected a few superb experiments and demonstrations that feat steps() from many web developers. Check them out and we wish we can get some impulse from them.

• Pure CSS3 typing animation with steps() by Lea Verou


• Cat Walk by Rachel Nabors


• Ken’s Street Fighter II by David Walsh

<!–

Suggestion:

–>

You competence like:

1. 
   How to Create Bounce Effect with CSS3 Animation
   


2. 
   Animate.css – CSS3 Library To Create Animation Easily
   


3. 
   A Look Into: Scalable Vector Graphics (SVG) Animation
   


4. 
   An Introduction to CSS3 calc() Function
   

Advertisement

Controlling CSS3 Animation with steps() Function