Who Needs Flash? CSS3 Animated Spider-Man Cartoon

This is impressive. We’ve all seen pure CSS3 animations, but this example is one of the most ambitious to date. It replicates the classic 1967 Spider-Man cartoon title sequence (open the link in a Webkit browser such as Chrome or Safari).

Ahh, happy memories! The sequence was constructed by Anthony Calzadilla of Optimum7, a US-based web development agency. He created the animated Star Wars AT-AT Walker which Andrew Tetlaw analysed in February.

The Spider-Man sequence primarily uses HTML5 and CSS3 with -webkit-animation declarations. A little jQuery-powered JavaScript was used to switch between scenes, but all the animated effects are handled by CSS. Finally, an HTML5 audio tag was used for the theme tune.

Anthony states that his biggest problem was timing the animations and scenes, although he thinks it would be possible to handle scene switching with CSS3 rather than JavaScript.

It’s obvious a lot of effort has been put into the demonstration and Anthony provides some detailed technical explanations. It shows what’s possible, although I don’t believe many developers would have the time or patience to code this by hand. However, I wouldn’t be surprised if companies such as Adobe considered offering animated CSS3 export facilities within their applications (especially since Flash is banned from certain platforms).

Have you discovered any great CSS3 animation examples?