CSS Transitions
How to use transitions If you haven't used transitions before, here's a brief introduction. On the element you want to have animate, add the following CSS: #id_of_element { - webkit - transition : all 1s ease - in - out ; - moz - transition : all 1s ease - in - out ; - o - transition : all 1s ease - in - out ; transition : all 1s ease - in - out ; } There is a lot of duplication due to vendor prefixes - until the specification if finalised, this will persist. If this bothers you, there are various tools such as CSS Scaffold , LESS , or my preference - SASS , that allow you to define mixins to avoid repetitive code. Another approach is simply to write the CSS without the prefixes, then use Lea Verou's -prefix-free to add them in at runtime. Something you definitely shouldn't do is to only include the webkit prefix. Tempting though it seems, particularly when developing for mobile devices, webkit isn't the only rendering engi