Skip to main content

Who Needs Flash? CSS3 Animated Spider-Man Cartoon

Share:

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.

Spider-Man CSS3

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?

Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.

Integromat Tower Ad