By Alex Walker

Free Screencast: Getting Started with CSS3 Animation

By Alex Walker

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?


  • 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:

  • A cool art in the design. Thanks

Get the latest in Front-end, once a week, for free.