CSS Transition :Dynamic visual effects With CSS

CSS transitions offer the easiest way to animate an interface. CSS is used everywhere to control how web pages appear, and shifts from one set of style sheets to another ordinarily occur abruptly. Adding transition properties allows most of those changes to occur gradually, for a more vibrant, fluid interface.

While transitions allow you to apply hover effects and other relatively marginal enhancements to traditional desktop interfaces, they are particularly useful for small-screen mobile interfaces in which displaying elements need to slide or fade out of view, or else collapse into icons. Abrupt transitions can be particularly disorienting on a small screen.

Try this simple Exaple
CSS:
div
{
width:100px;
height:100px;
background:red;
-webkit-transition:width 2s; /* For Safari 3.1 to 6.0 */
transition:width 2s;
}

div:hover
{

HTML
<div></div>