Here’s a magnificently eloquent compass mixin that will work CSS3 transition magic on all elements in one fell swoop:

* { @include single-transition(all, 100, ease-out, 0); }

How It Works

If you’re not familiar, read all about the compass sass framework here. Also make sure you @import 'compass/css3/transition' once sass/compass are up and running.

The code above actually outputs 5 lines when all is said and done, but this is CSS, so let’s not argue semantics, ).

* {
  -webkit-transition: all 0.3s ease-in-out 0.1s;
  -moz-transition: all 0.3s ease-in-out 0.1s;
  transition: all 0.3s ease-in-out 0.1s;

This code says “Apply a transition to all CSS properties of elements * (all of them) for a duration of .3 seconds, and wait .1 seconds to start the party.” That’s all there is to it! Now your other developer friends will get a nice flashy surprise when they resize your site right and left to spy on your responsive design skills; plus, the casual visitor who happens to resize just because they need the screen real estate might be impressed as well. They’ll probably even think you spent time writing out all the vendor, and if they’re more observant than most they might not help but imagine how you painstakingly matched up all the timings. Victory is yours.

But Wait, There’s More!

First off, I personally prefer the sass indented syntax, which ends up being 2 lines. Typing less is worth the vertical bloat, in my opinion. So here’s the same code, properly indented in in .sass format:

  +single-transition(all, 100, ease-out, 0)

Now that you’re hip to the indention, let’s take things a step further with :hover effects, in 2 lines:

*, &:hover
  +single-transition(all, .3s, ease-in-out, .1s)

Here we keep the original global transition, but add the :hover pseudo class as an adjacent group selector. Now hover effects of all elements receive matching transition animation. On first glance it may look like you painstakingly matched up dozens of lines of CSS animation to get all the timing and effects to match up. Probably even on second glance. Woot.