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?
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]
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]
[…] 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]
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]