Anime with CSS and Webkit

Recently I’ve been thinking about Webkit’s CSS Animation module, and playing The World Ends With You on the Nintendo DS. TWEWY is a JRPG with lots of simple Anime-style cutscenes, and it occurred to me that they must be quite easy to recreate using CSS Animation; so, I have.

I’ve put some examples online here:

Anime with CSS Transitions.

Pass your mouse over the boxes to see the animation effects. Note: This will only work with a recent Webkit-based browser (Safari 3.1, most likely).

Update (October 2009): As it’s been announced that this has just landed in the nightly builds of Firefox, I’ve updated the examples.

Update (December 2009): Opera 10.5 Alpha also supports transitions, so the demos have been updated again.

These are only very basic examples, which I threw together quickly; with time and application, these could be developed further and made more complex. They both use just a very simple positioning change transition:

-moz-transition: left 1s linear;
-o-transition: left 1s linear;
-webkit-transition: left 1s linear;

Update: Added an extra example, and changed some of the timings and properties, so they’re no longer quite as simple as the code above.

At the moment they’re pretty impractical; an intellectual exercise only, really, but worth experimenting with (I’m actually pretty surprised that no-one seems to have thought of it before). I wonder if it would be possible to do a whole story?