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.

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?

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • XLCowBoy

    Call me when HTML/CSS/JS can do this: http://ecodazoo.com/

    • http://www.optimalworks.net/ Craig Buckler

      Call me when that site’s indexed in Google!

      • XLCowBoy

        SEO wasn’t the topic at hand, no? ;)

        And if it was, Spidey would probably be even worse off.

        “My, what bulging paragraphs you have! And it seems your span is happy to see me too!” :D

    • http://www.experioronline.com Jenny McDermott

      Good point, XLCowBoy. that Flash animation blows away the lame Spiderman “animation.” It’s just a slideshow, which one can do with Javascript too. Sometimes a slideshow is all you need, but CSS is just not rich media and it can’t pretend to be.

  • http://keryx.se itpastorn

    As cool as this technology demo is, there are a few caveats that need to be discussed:
    1. Accessibility. When using CSS for non decorative styling, but real content, there is none.
    2. Lack of an event model worthy of its name will make this technology very hard to use. Actually, I do not believe that animation belong in CSS, but in the DOM and I have written about it here: http://itpastorn.blogspot.com/2010/04/why-declarative-animation-should-be-in.html

  • http://www.jasonbatten.com NetNerd85

    Who needs Flash? anyone that wants to use IE or Firefox and wants to view animations now, like today, not in 15 years when CSS 3/html5 are finalized.

    Firefox… you remember don’t you? Firefox the new netscape… netscape? what, who are you? get off my lawn!

  • dusoft

    great as an experiment, but since it uses another proprietary CSS rule, it is sad to see it promoted as an alternative to Flash.

    • http://www.optimalworks.net/ Craig Buckler

      As mentioned, it’s not a serious attempt to replace Flash, Silverlight or any other rich media content. But it shows the potential and could be a viable alternative for simple animations (in a few years).

  • USPatriot

    The real question is, how long did it take him to do that? Compared, to how long it would take to do the same in Flash and SilverLight. The ‘latest and greatest’ isn’t always the best solution, when time constraint is involved.

  • SpacePhoenix

    It would be interesting to see Anthony do the timing with CSS3. As it stands it’s accessibility is flawed as you can’t guarantee that JavaScript will be available, just as you can’t guarantee that Flash will be available.

    It also needs to be able to work on mobile/smart phone browsers, I think until HTML5 is widely supported IE doesn’t support it. According to Net Applications IE has a 59.95% share of browser usage and that is way to high a % of users to ignore.

    • http://www.optimalworks.net/ Craig Buckler

      The animations are webkit only, so around 10% of people can view them in their default browser. Who knows when or ever these effects will become an established CSS standard. It’s very clever though.

  • Prithwiraj
  • Sorin

    Who needs cars? You can arrive in the same place walking.
    We have time!

    • 2MHost.com

      Agree ..

    • ocube

      agree, I th8ink some people will take their worship of steve jobs to incredible levels… he does not own the internet, we the users and designers do and we should be determining what is and is not useful not the manuefacturers who stand to gain if they dictate (and I mean both Apple and Adobe).

  • https://twitter.com/scotthoff scotthoff

    Yep. I’m on firefox and am discouraged from using crome at work. No demo for me!

  • moneymark

    Who cares about what browsers support it now, what properties it uses…. The major issue that makes this not even remotely a viable replacement for flash is the CPU usage. It is going to max out pretty much any CPU thrown at it, which was one of the main reasons people started complaining about flash in the first place.

    • http://www.optimalworks.net/ Craig Buckler

      I’ve just compared it against the original movie on YouTube. CPU usage was almost identical – around a 25% peak. Memory usage was higher and progressed from around 10Mb to 90Mb by the end. Flash was fairly consistent at 50Mb throughout.

      I don’t see it being a problem – especially since browsers are moving toward direct hardware rendering.

  • http://keryx.se itpastorn

    A lot of the discussion about this technology here clearly indicates that it is being contemplated for use cases it was not designed to handle.

    CSS animations are completely inaccessible to non sighted users and carry no semantic meaning. Their contents are not indexed by search engines. In these regards they are not an improvement over Flash.

    The discussions on the CSS WG mailing list and the discussion on this blog post are worlds apart. The technology was not supposed to handle these kinds of animations – full stop.

    Ref: http://lists.w3.org/Archives/Public/www-style/2010Mar/0504.html

  • Ali Baba

    Really? This is lame.

  • Flasher

    This almost made me cry. I made a way better animation in Flash *10 YEARS AGO!*

    This is supposed to be impressive..? and ambitious?? See you in 10 years.

  • ocube

    Is this animation a joke? It insults people who develop serious flash content!!!

  • Vince

    I don’t think CSS will ever come close to flash in terms of flexibility. Basic things maybe, but CSS is not a programming language, it’s a very specific DSL. As soon as CSS starts getting more programming like features, the more it will suck.

    We have JavaScript already and besides, can you imaging how ugly CSS code would look like?