CSS Transforms combined with animations are undoubtedly useful. Unfortunately though, the only way to create them is to manually input values and pretty much guess the result.

This methodology pretty much kills any creative aspirations anyone might have in making these animations. So while there are quite a few cool looking examples out there they lack the glamour of say, flash animations.

It seems to me there is a need for a tool which allows anyone to create these css animations in a visual way. As far as i know, no such tool currently exists. So naturally, i set about making something myself.

Rather than make an entire tool from scratch though, i decided to simply write an exporter script for another tool - in this case, Blender.

Why Blender? Well, it exposes pretty much all of the information i require to construct both a scene and animation tracks. Also, since Blender handles 3D scenes, there is a potential to work with 3D CSS Transforms in the future.

As an example, here’s a simple animation of an orange stick man walking across the screen. The stick man was both constructed and animated entirely within Blender, and exported using my export script.

And the scene as seen in blender:

Which is simply a set of planes linked together and animated. Really, it couldn’t be any simpler.

Currently the only browsers which seem to support both CSS transforms and animations are based off Webkit. i.e. Safari and Chrome (including the iPhone and Android browsers).

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