Neat content transitions like HTML5 bing

Question

Recently, I saw a good effect that is visible in Bing for IE9, as well as for Safari 5. When you press the enter key in the search box, the search box moves perfectly up to the top of the page, and the results add up from below, you can see it in action here ... http://www.youtube.com/watch?v=NYuLALX6aeI#at=69

My question is: how is this done and how can I do this? I hope you understand my question.

Answer 1

Main 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/

Answer 2

They all use CSS3 animations. I was looking for a very simple search box with animations here Use Chrome or Safari. Just type in 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 semantic code. CSS animations are much faster and smoother.