Moving on from Creating CSS Animations, i thought "How can i make this exporter more useful?".

The answer is of course to completely remove Webkit from the equation, which leaves us with CoreAnimation. The end result being that the animation can be directly compiled into an iPhone or Mac OS X application.

Not going into much detail, CoreAnimation is essentially the library used by Webkit to display and animate any elements which have been transformed by a CSS Transform.

The actual scene is simply constructed using transformed CALayers. As for the animation, a CAKeyframeAnimation is created and attached to each CALayer. In the case of multiple properties being animated at the same time, a CAAnimationGroup is used to group these animations together.

The end result is a handy animation class which creates both the scene and the related animation tracks. i.e.:

CALayer *root = [self.view layer];

// Make anim
MyAnim *anim = [[MyAnim alloc] init];
CALayer *animRoot = anim.root;
[root addSublayer:animRoot];

[anim play]; // easy!

As an example, the MyAnim class for the previously featured walking orange figure is as follows.

Which leads onto a repeat of the question, is there a real-world demand for such a tool yet?