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.

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?

4 comments on
“Anime with CSS and Webkit”

  1. 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.

    Chris Papadopoulos [July 11th, 2008, 02:10]

  2. I don’t know about css animations. I feel it’s only going to complicate CSS and JavaScript.

    Vahan H [July 15th, 2008, 21:25]

  3. […] feature will use the proprietary –moz– prefix; I’ve updated the demos in my previous post, Anime with CSS and WebKit, to reflect […]

    Firefox supports CSS Transitions | Broken Links [October 13th, 2009, 08:16]

  4. Very cool and interesting demo.

    At the moment, for a more cross-browser solution, you can use jQuery for a similar effect.

    http://docs.jquery.com/Effects/animate

    Radius K [December 3rd, 2009, 18:24]