Does this sound familiar?

You’ve seen enough, say, CSS3 animation examples (or maybe transitions, or sibling selector demos or whatever) to understand the basic idea, but just need someone to quickly run through the code with you when it comes time to use it?

Well, that’s EXACTLY what Jumpcasts are about. Five to 10-minute crash courses designed to help you get your head around one specific CSS property.

CSS3 animation is first out of the gate. In part 1, we’re going to look at the basic syntax.

CSS3 Animation Part 1

Everyone is welcome to play with the live example here.

In part 2, we’ll use it in a more developed example, and then run through the browser support landscape.

CSS3 Animation Part 2

The live traffic light example is here.

I already have a few more in mind, but is there anything you think we definitely need to cover like this?


Alex manages design and front end development for and is SitePoint's Design and UX editor.

Free Guide:

How to Choose the Right Charting Library for Your Application

How do you make sure that the charting library you choose has everything you need? Sign up to receive this detailed guide from FusionCharts, which explores all the factors you need to consider before making the decision.

  • somezing

    Thanks! That was very informative and just at the right pace :)

  • A. Curtis

    AWESOME! Can’t wait for more. Great job Alex! Also, thanks for turning me on to a new tool, Dabblet.

  • matz

    Nice… what character is it before ‘keyframes’? Can not make out of it with the quality of video for CSS3 Animation Part 1. Also, can you please provide the html source that works with the styles?

    Thanks! Nice job done.

    • Alex Walker

      My apologies, Matz. It’s an ‘@’ symbol.

      It was relatively clear in the original screen captures, but the Youtube compression fuzzied it up a little. I’ll fix that in future jumpcasts.

      Everyone is welcome to play with the live example here:

      1). Basic example:

      2). Traffic light example:

      You can copy, paste and edit the code live there.

  • Gregory Topple

    What browser or tool set did you use? I needed browser specific extensions to have this work in mozilla and webkit.

    • Alex Walker

      Greg, I’m using Dabblet with PrefixFree which adds the prefixes in automatically (I touch on that at the end of the second vid).

      There are a number of other ways to help you manage all these prefixes (Less, Sass, Compass, etc) which I expect to cover in future.

      You’re welcome to play with the live example here:

      1). Basic example:

      2). Traffic light example:

  • NeonDigital

    A cool art in the design. Thanks

Special Offer
Free course!

Git into it! Bonus course Introduction to Git is yours when you take up a free 14 day SitePoint Premium trial.