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.
audio tag was used for the theme tune.
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.