On this property, effect take place in an element smoothly over a given time period. Specifying duration is compulsory to see the effect. We need to specify transition-property, transition-duration, transition-timing-function and finally transition-delay.

Web designers can easily provide beautiful effects with the help of transition withoutusing jquery.

Browser support: Firefox, Chrome, Opera, IE10+, and Safari. Add prefix -webkit- for chrome 25 and its earlier versions and safari.
Add prefix -moz- for firefox.
Add prefix -ms- for IE.

1. Transition-properties: Lists the properties which you need to be transitioned. Some properties which can be trasitioned are border, font-size, background-color, line-height, letter spacing etc. Whole list of the properties is mentioned on the w3c website.

   .div
   { 
   border-radius:90px; 
   width:120px; 
   height:120px; 
   background:#F60;
   }
   .div:hover
   { 
   width:150px;
   height:150px;
   transition-property:width;
   -webkit-transition-property: width, height; /* Safari */
   -moz-transition-property: width, height; /* Firefox 4 */
   -o-transition-property:width, height; /* Opera */
   transition-duration: 3s;
   -webkit-transition-duration: 3s; /* Safari */
   }
   

   hover

   Here transition property is applies to width and height.

2. Transition-duration: This sets the time or the duration of the effect.
3. Transition-timing-function: Six options are available in this function. Ease, ease-in, ease-out, linear, ease-in-out and cubic-bezier. By default ease is selected. You can use cubic bezier if you are looking for very fine effect. It helps you to choose your own value for the effect.
   1. Linear: Animation carries same speed from start to an end.
      Linear
   2. Ease: Speed is fast in the begining and slow down at the end.
      Ease
   3. Ease-out: Ease-out is quite similar to the ease. But it is slower in beginning in comparison to ease.
      Ease-out
   4. Ease-in: Ease-in gives the smooth effect to the animation.
      Ease-in
   5. Ease-in-out: Speed of an animation is slow in the beginning and at the end.
      Ease-in-out
   6. Cubic-bezier: The function can be customized by using the values of your own.
      Cubic-bezier
4. transition-delay: This function sets the time before animation begins.

   .div
   {
   position:absolute;
   left:0;
   opacity: 1;
   transition: opacity 2s ease-in 2s;
   -o-transition: opacity 2s ease-in  2s;
   -webkit-transition: opacity 2s ease-in 2s;
   -moz-transition: opacity 2s ease-in 2s;
   -ms-transition: opacity 2s ease-in 2s;				
   }
   

   
   

   In the above example image fading starts after 2 seconds.