Web Development

CSS animations are cool, especially with @keyframes which provides great control over your animation. But CSS animation itself do not provide UI or animation graphics, they just animate DOM elements between two states. Hence, there are lot’s of limitations to CSS animations. SVG might kick in at some point to make things little bit easier but it can be really nasty.

So the alternative it to used png based sprite sheet. Think about cinema film. We have single strip of film with many frames in it. Each frame represent distinct motion breakpoint. Normally to see continuous motion, frame rate should be 24. That 24 frames must be shown at equal interval in just one shown. Any frames more than that is just adding more smoothness to the animation.

Show to create web projector for sprite film. Before we move ahead, let me show you how a spire film looks like.

We have 500px X 72px sized sprite sheet of smurf (whatever) with 10 frames. Hence we have 50px X 72px size frame.

Now think like this, if we could just flash each frame at equal interval, we could see the animation. What we can do is, pull the sprite film to the left, that way we could see the animation. In CSS world, that is like creating 50px X 72px div and setting spire as it’s background image. By default, div is covering first frame. Then using @keyframes, animating horizontally background position from 0px to the (width of the spite sheet — frame width) (500px — 50px) for some amount of time.

<div></div>

<style>

div{

width: 50px;

height: 72px;

background-image : url(http://i.imgur.com/xtk0SCC.png);

animation: moveX 3s linear forwards;

} @keyframes moveX{

from{background-position-x:0px;}

to{background-position-x:-450px;}

}

</style>

if you don’t know about animation property, you should go check some videos on youtube. It’s basically says what animation to use for how much duration. Then comes the timing function and other sugar. forwards is used when we want to apply last frame property to element so that it doesn’t jump to animation start (this is not required when animation is run infinitely).

Here is the fiddle for above animation

Basically, it will look like below

But above animation does not give us proper animation. That is because animation property by default makes transition between states in @keyframes animation (two states in this case) gradual according to animation-timing-function property (linear in this case, we used shorthand). But rather we need step function instead of brazier-curve or linear function.

Step function will apply CSS property to element for some duration and move ahead for second frame, applying CSS property for that frames and so on until the last frame. steps(n) exactly does that. steps(n) is animation-timing-function which is a step function with n steps. So, CSS will break down values between from and to in @keyframes animations in n equal parts and apply it for animation-time/n seconds for each step for n steps, creating discreet animation sequence instead of gradual one.

So, let’s change linear to steps(10) in our CSS as we have 10 frames, hence 10 steps. Let’s set animation duration to be 1s so that each frame will get 0.1s of viewing time. Also, we need to change background position in to to -500px. This is because…

When you use steps(n), your endpoints are divided into n segments creating 11 unique values. When steps(n, end)is used, second parameter is your endpoint direction which is end by default if absent. end tells that animation must be start from the beginning of first frame. Hence last frame will have css property as we desire.

in contrast with above, steps(n, start) pretty much works the same but it gonna choose endpoint css properties of a frames, which in this case we don’t want.

Now, let’s change the css values and see what we get.

<div></div>

<style>

div{

width: 50px;

height: 72px;

background-image : url(http://i.imgur.com/xtk0SCC.png);

animation: moveX 1s steps(10) infinite;

} @keyframes moveX{

from{background-position-x:0px;}

to{background-position-x:-500px;}

}

</style>

Get fiddle for above animation here

Basically it will look like below