Using the steps () system in CSS3 animation

{  width: 190px;   height: 240px;   margin: 2% auto;   background: url (' http://treehouse-code-samples.s3.amazonaws.com/CSS-DD/codepen/blog/ Monster.png ') left center;   animation: play. 8s Steps (Ten) infinite;}  {    100% {background-position: -1900px;} }

There is a little-known timing feature in CSS animation that allows us to break an animation into segments-or steps-instead of running it as a continuous animation from start to finish. Since we are able to accurately display each sprite image as a frame, there is no moderating effect in the illustrations, this feature is useful for animating the sprite table animations.

Steps () function
Steps (), we are able to control the number of times the keyframe animation is rendered; it develops on the basis that we set the value of the equidistant step animation. Knowing this, let's use steps () to create an animation of a simple character sprite table.

My illustrator artboard creates each animation frame as a standalone 190x240 image and then puts the Beidou "spriting feature advantage to quickly generate a horizontal sprite table that contains all the exported images.

Creating the animation

To animate our monster character, we ' ll first create a rule where we define the width and height dimensions and display th E main Sprite sheet as a background image.

. monster {  width:190px;  height:240px;  Background:url (' monster-sprite.png ') left center;}

Next, 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-1 900px.

@keyframes Play {   100% {background-position: -1900px;}}

Running the animation

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

. Monster {  ...  Animation:play. 8s;}

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 image sprites, we can say that it's made up of ten frames––or steps. So let's define ten steps in our animation sequence:

. Monster {  ...  Animation:play. 8s steps (10);}

So now, the animation would run frames in it. 8s Duration–it uses the background position animation to run through EA CH Sprite image as a step.

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

. Monster {  ...  Animation:play. 8s Steps (Ten) infinite;}