Understanding CSS3 Transitions

It was 1997 and I was sitting in a terribly run-down apartment in beautiful Allston, Massachusetts. A typical late night of viewing source and teaching myself HTML followed a day of packing CDs at a local record label for peanuts (hence the run-down apartment). I’m sure you can relate.

One triumphant night, I pumped my fist in sweet victory. I’d just successfully coded my first JavaScript image rollover. Remember those?

I still remember the amazement of seeing a crudely designed button graphic I’d cobbled together “swap” to a different one when hovered over by the mouse. I barely had a clue as to what I was doing at the time, but making something on the page successfully change, dynamically, was, well…magical.

We’ve come a long way over the past decade in regard to interaction and visual experience on the web. Historically, technologies like Flash and JavaScript have enabled animation, movement, and interaction effects. But recently, with browsers rolling out support for CSS transitions and transforms, some of that animation and experience enrichment can now be comfortably moved to our stylesheets.

Read More