Thoughts on web development and technologies by Peter Gasston
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:
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).
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:
-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?
Chris Papadopoulos [July 11th, 2008, 2:10 am; Permalink]
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.
Vahan H [July 15th, 2008, 9:25 pm; Permalink]
I don’t know about css animations. I feel it’s only going to complicate CSS and JavaScript.