Neat content transitions like in HTML5 bing

I saw recently a nice effect being previewed in Bing for IE9 and also for Safari 5. When you press enter on the search box, the search box moves nicely up towards the top of the page and the results fold up from the bottom. You can see it in action here... http://www.youtube.com/watch?v=NYuLALX6aeI#at=69

My question is, how is this开发者_JAVA技巧 done and how can I do this? I hope you can understand my question.

Basic idea:

JQuery:

$('#go').click(function() {
    $('#form').animate({
        'height': '80px',
        'text-indent': '50px',
        'padding-top':'20px'
    }, {
        queue: false,
        duration: 1500,
        complete:function(){
            $('html,body').css('overflow-y','visible');
        }
    });
    $('#results').show({
        type: 'slide',
        direction: 'up'
    }, {
        queue: false,
        duration: 1500
    });
});

CSS:

#form {
    background-color:blue;
    text-indent:300px;
    width:100%;
    height:100%;
    padding-top:200px;
}

#results {
    background-color:yellow;
    display:none;
    height:700px;
}
body, html {
    width:100%;
    height:100%;
    overflow:hidden;
}

HTML:

<div id="form">
    <input type="text" /> 
    <input type="button" id="go" value="go" />
</div>
<div id="results">Search results</div>

Demo: http://jsfiddle.net/AlienWebguy/hwAtU/

They are all using CSS3 animation. I fiddled a very simple search box with animation here Please use Chrome or Safari. Just type something and hit enter.

CSS

body{text-align:center; padding: 200px 0;-webkit-transition: all 0.4s linear;}
#search{-webkit-transition: all 0.2s linear;}
#search:focus{-webkit-transform:scale(1.4);}

HTML

 <input type="search" placeholder="Search..." id="search"/>

JS:

document.getElementById('search').addEventListener('keydown', function(e){
    if(e.keyCode == 13){document.body.style.padding = "40px";}
}, false);

Using Javascript for positioning and animation is not a semantic code. CSS animation are way faster and smoother.