Search input area autogrow – how?

they’re using CSS3 transitions.

<style type="text/css">
#s {
    float: right;
    -webkit-transition-duration: 400ms;
    -webkit-transition-property: width, background;
    -webkit-transition-timing-function: ease;
    -moz-transition-duration: 400ms;
    -moz-transition-property: width, background;
    -moz-transition-timing-function: ease;
    -o-transition-duration: 400ms;
    -o-transition-property: width, background;
    -o-transition-timing-function: ease;
    width: 72px;
}
#s:focus {
    background-color: #f9f9f9;
    width: 196px;
}
</style>

<input type="text" class="field" name="s" id="s" placeholder="Search">