You Did What with What?

Stuff You'll Most Likely Do Before Reading Any of This Post

View the demo Fork it
You'll need Safari or Chrome to view the demo

There have been a ton of new, really exciting things going on with CSS over the past couple years and I've had an itch for a while to work with them. I started out just wanting to do a small project to get familiar with some of the newer, more advanced CSS3 features, and it quickly grew into a two month immersion into CSS3 land.

Do they speak English in what?

A few years back Jarrat Moody, a super talented designer, created a kinetic type motion graphics piece based on a scene from the movie Pulp Fiction; that I am still floored by to this day. Since I saw that I have wanted to create a similar piece and even made a few attempts using After Effects, none of which ever really materialized.

Let's do this!

So I have my excitement over a new feature set, and inspiration from Mr. Moody, time to get to it. The Man From Hollywood is a kinetic type animation using only HTML, CSS and Javascript. All of the animation is done using Webkit CSS transition, transforms, as well as standard CSS properties. Javascript just acts as a helper to turn CSS classnames on and off at the appropriate times. All of the content you see on the demo is HTML and CSS, no images were used. The audio clip is scene from the movie Four Rooms

Is it practical?

No, not really, but it's not really supposed to be. My goals were to teach myself the ins and outs of a new feature set, make something fun to look at, and hopefully help and/or inspire others to work on their own CSS3 awesomeness.

If you enjoy it, you should Tweet it or share it on your blog or just whisper the URL into a co-worker's ear. That last one would definitely be the best.

Thanks for reading