CSS3 Animations Without Keyframes

HTML5, CSS3 and JavaScript

The Fine Art of Web Development by Martin Ivanov

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.

Categories and Tags

© 2006 - 2023 Martin Ivanov