CSS3 Animations Without Keyframes

Here’s how to turn a CSS3 keyframe animation to hard frame animation, which can be used to create flip-book like effects with background image sprites, etc. Just change your animation-timing function to “step-start”:

[sourcecode language=”css”]animation-timing-function: step-start;[/sourcecode]

Step-start is currently implemented in all browsers which support CSS3 keyframe animations, and you will need to use the vendor-specific properties for each one.