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.
© 2006 - 2021 Martin Ivanov