This is a brief response to Thomas Fuchs’ insightful article about Apple’s new CSS3-animation enhanced navigation and Mac pages, available here.
I’m guessing that instead of crafting those bounce animations by hand, Apple’s people are using some kind of CSS Animation Design/Generation tool. That tool may either be some sort of server-side algorithm that builds the CSS3 animation and passes it to the browser, or a tool used during design and authoring, that does similar things. That’s another approach to keeping these animations easy to change, or update, just adjust the animation in your design tool, and re-generate the CSS!
Some evidence to support this:
1. The rate of keyframes is regular – starting at 25%, and incrementing every 5%. This is indicative of algorithmic output, with more than enough keyframes for complex and smooth animation.
2. The smoothness of the animation and precision of the values is greater than can be achieved by hand in a reasonable amount of time. Perhaps they’ve got some sharp people that can calculate values and just type them in, but since these types of algorithms already exist and are well-documented, why not leverage them? Just because the end result is a static CSS declaration, doesn’t mean that they started out like that. It’s not that unlikely to imagine a way to procedurally generate CSS Animations from keyframes, or other ways of declaring animation. (I should know, i’ve written one already that uses keyframes!).
This is the purest of conjecture, but I believe that Apple has built some sort of CSS animation design tool, probably a close, general-purpose cousin of the recently released iAd Designer.
I may be wrong, which is good, since I’m building my own Visual CSS Animation Designer, that I call Edit Room.
If I’m right, then it’s good to have competition.