Creating better animations for the web has been something I’ve been working on for a few years, and I’ve just figured out a new method that offers more flexibility and animation fidelity than was previously available. I call it “CSS prerendering,” and it’s easier than you think.
CSS animations (
@keyframe animations are meant to solve, but they don’t offer the level of dynamic responsiveness that transitions do.
@keyframe animations are also limited by the native easing formulae available — there are only six. This is not enough to meet the needs of all designs. Joe Lambert came up with a way around this with Morf; a tool that generates a
@-webkit-keyframe animation with many tiny steps. This opens the door to an unlimited selection of easing formulae. I decided to build on top of this idea with Rekapi’s
toCSS feature, which uses a straightforward keyframe API to generate cross-browser compatible CSS code. I then used that functionality to create Stylie, which provides a UI to create animations and exports it to CSS code.
While I feel that a robust UI to prototype and tweak CSS animations is essential, the process of configuring an animation and then copy/pasting potentially hundreds of lines of code into a static CSS file is inelegant and highly inflexible. I felt that there had to be a better way. Enter CSS prerendering.
The idea behind CSS prerendering is pretty straightforward — you create a CSS
<style> element, and then insert that element into the DOM. When the animation is complete, you simply remove the
<style> element from the DOM. This approach works surprisingly well, particularly in WebKit-based browsers (other rendering engines still need to catch up).
Until now, there haven’t been any tools that I could find that can do this, so I decided to fill this void with Rekapi’s
CSSRenderer, you can use the same API to create a CSS
Creating a CSS animation with Rekapi
To create a CSS
@keyframe animation that works in every browser, you need something like this (generated by Stylie):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47
…And then paste that into your CSS code. That’s just for one, very simple animation. Here’s how that same animation might be set up with Rekapi’s
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
CSSRenderer significantly narrow the gap between performance and flexibility. I hope that CSS prerendering becomes more widely used, as it enables a much smoother web experience. I’d love to know how CSS prerendering works for you, and if you find any bugs, please report them. Happy animating!