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:
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?