CSS Animations alter Frame Rate

Question

Looking at CSS animation to replace animated GIFs in loading wheels.

There is a basic example here http://jsfiddle.net/kFmY8/448/

#me {
    -webkit-animation: rotation 2s infinite linear;
}

@-webkit-keyframes rotation {
    from {-webkit-transform: rotate(0deg);}
    to   {-webkit-transform: rotate(360deg);}
}

I want to alter the frame rate so that there are only 12 frames per cycle. This would take out the fluidity of the animation more closely matching the animated GIF it replaces.

Can this be done?

Answer 1

You want to use steps() for the easing function instead of linear.

http://jsfiddle.net/trolleymusic/uTd3x/

I've changed your animation value from:

-webkit-animation: rotation 2s infinite linear;

to:

-webkit-animation: rotation 2s infinite steps(12);

Where the number inside the steps function is how many frames it will divide the animation into.

Bit of reference: http://css-tricks.com/snippets/css/keyframe-animation-syntax/ - about halfway down there's a section called Steps()