Use CSS to create smooth transitional effects. Move and change elements without the need of plugins like Adobe Flash or Java. Using lightweight, simple and efficient code. However all these advantages of Cascading Style Sheets do have one main noticeable disadvantage, in order to see these effects, the end client must be using a web browser with supports such effects.

See the search bar above for an example – this works smoothly in Mozilla Firefox, Google Chrome and Opera. Internet explorer will only display the before and after goal, none of the effects to transition from one stage to another.

To use the effects you must have a before and after goal. In the example below we will set a default width property and a different width property on hover.

The next stage is to add a duration property (-transition-duration) for the effect, the larger the number the slower and more gradual the effect. We can name which properties we would like this transition to affect, separated by commas for multiple properties such as width and background or you can put all to effect all differing properties (-transition-property). Finally set the timing function (-transition-timing-function) to select the type of transition. Unfortunately this will have to be done for each of the main engines.

#search {
-webkit-transition-duration: 600ms;
-webkit-transition-property: width;
-webkit-transition-timing-function: ease;
-moz-transition-duration: 600ms;
-moz-transition-property: width;
-moz-transition-timing-function: ease;
-o-transition-duration: 600ms;
-o-transition-property: width;
-o-transition-timing-function: ease;
width: 50px;
}
#search:hover{
width: 200px;
}