Jumpcast video tutorial

Free Screencast: Getting Started with CSS3 Animation

By | June 20, 2012 | CSS | CSS3 | HTML | Programming

7

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?

Enjoy!

Learn Responsive Web Design

Join Learnable $29 Includes all SitePoint books

Alex Walker

Alex manages design and front end development for SitePoint.com and writes for Design Festival's monthly design newsletter.

More Posts - Twitter - Pinterest - Google Plus

{ 7 comments }

NeonDigital June 30, 2012 at 5:03 am

A cool art in the design. Thanks

Gregory Topple June 26, 2012 at 9:26 am

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

Alex Walker June 28, 2012 at 5:47 pm

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: http://dabblet.com/gist/2849701

2). Traffic light example: http://dabblet.com/gist/2821951

matz June 23, 2012 at 8:46 pm

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 June 28, 2012 at 5:41 pm

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: http://dabblet.com/gist/2849701

2). Traffic light example: http://dabblet.com/gist/2821951

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

A. Curtis June 22, 2012 at 7:48 am

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

somezing June 21, 2012 at 12:38 am

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

Comments on this entry are closed.