Anime with CSS and Webkit

Warning This article was written over six months ago, and may contain outdated information.

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.

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:

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?

Related

4 comments on “Anime with CSS and Webkit”

I like the way the shadow trails the character. The perspective is pretty neat.

Between this and the various –webkit-transforms and other nifty webkit only stuff you can actually make some really clever animations just in CSS.

This is something I definitely want to experiment with more as time allows.