It was way cool. check out a quick demo I threw together.

I inserted 2 breakpoints in the demo. One at 800px and another at 480px, so you should see the design adjust twice.

The CSS

header h1 a,
article h1,
article h2,
article{
     -moz-transition: all .5s linear;
     -webkit-transition: all .5s linear;
     transition: all .5s linear;
}

Put that in with the base CSS (not the media query) and you’ll get a nice animation effect as you resize the browser window.

You can’t animate all the properties, but things like: color, margin, padding, color, font-size, etc are all fair game. I’ve mostly been using transitions for softening hover effect lately, but I think this, if tastefully done, can be a nice hidden (and light weight) gem.

The Problem

The font family in this text area default to Courier New, but that’s pretty ugly.

The Goal

Look at the nice font in this textarea!

The Solution

You have to redefine the font-family for a textarea. Just a weird quirk.

textarea{
font-family:Verdana, Arial, Sans-Serif;
}