Cacher is the code snippet organizer for pro developers

transition everything:
  -webkit-transition: all 0.5s ease; 
  -moz-transition: all 0.5s ease; 
  -o-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.5s ease; 


Here is the short hand syntax to transition a property:

-webkit-transition: property_name duration timing_function delay;  				
-moz-transition: property_name duration timing_function delay;  				
-o-transition: property_name duration timing_function delay;  				
-transition: property_name duration timing_function delay;

Unfortunately all browsers interpret it differently, which is why we have to define it 4 times. The parameters however, are identical for all the browsers. If you like, you can define it explicitly, like this:

transition-property: property_name; 				
transition-duration: duration; 				
transition-timing-function: timing_function; 				
transition-delay: delay;

You will have to define it explicitly for each of the browsers, which would require 16 lines of CSS as opposed to 4 lines as shown above.
The first two parameters need an explanation. The last one is used if you want to begin the transition after a certain duration. The third parameter, timing function, is what makes CSS transitions really elegant. You can specify how the transition should occur.

cubic-bezier(cp1x, cp1y, cp2x, cp2y)
ease − equivalent to cubic-bezier(0.25, 0.1, 0.25, 1.0).
linear − equivalent to cubic-bezier(0.0, 0.0, 1.0, 1.0).
ease-in − equivalent to cubic-bezier(0.42, 0, 1.0, 1.0).
ease-out − equivalent to cubic-bezier(0, 0, 0.58, 1.0).
ease-in-out − equivalent to cubic-bezier(0.42, 0, 0.58, 1.0).

CSS3 Transition Examples

There is no better way to understand something than by seeing a few examples. And that is exactly what we are going to do. We will look at a couple of examples of single property transitions followed by an example of two properties. Once you understand how you can transition 2 properties simultaneously, you can do the same for as many properties as you like.
Cross-fade Between Images

Cross-fade is one of the most aesthetically pleasing transitions between photos. The concept is quite simple. Position one photo on top of the other and gradually reduce the opacity from 100% to 0 of the top image. Before CSS transitions, it was a pain to achieve this. We had to write a JavaScript function with a setTimeout that decrements the opacity of the image. And with CSS3's transition property, with just a few lines of code, we can cross-fade between two images with ease. Here is the code for it:
	
<div id="cf">
    <img class="bottom" src="images/pebbles.jpg" />
    <img class="top" src="images/summit.jpg" />
</div>

#cf {
    position:relative;
    height:281px;
    width:450px;
}
#cf img {
    position:absolute;
    left:0;
    opacity: 1;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    -ms-transition: opacity 1s ease-in-out;    
    transition: opacity 1s ease-in-out;
}

#cf img.top:hover {
    opacity:0;
}

If you are on a modern browser that supports CSS3 transitions, click here to see the cross-fade in action.

Rotating Box

The example code below displays a div and clicking on it rotates it by 360 degrees over a period of 3 seconds:

<div style="width: 400px; -webkit-transition: -webkit-transform 3s ease-in;" onclick="this.style.webkitTransform='rotate(360deg)'">
    This div will do a spin when clicked the first time!
</div>

Click here to see the spinning div in action. You should notice that in the style property, we have specified the transition property is transform. However, we have not specified the transformation in the style code. We are defining the transition property when the user clicks using JavaScript.

Multiple CSS3 Transitions

Usually we use single transitions only, however sometimes adding multiple transitions together enhances the experience. The syntax for multiple transitions is quite simple
transition: property_name1 duration1 timing_function1 delay1, property_name2 duration2 timing_function2 delay2, ...
Straight forward, isn't it? Let's look at an example:

#resizable div {
    padding: 5px 10px;
    border: 1px #999 solid;
    height: 40px;
    width: 300px;
    background-color: red;
    -webkit-transition: height 0.3s ease-in-out, background-color 0.3s;
    -o-transition: height 0.3s ease-in-out, background-color 0.3s;
    -moz-transition: height 0.3s ease-in-out, background-color 0.3s;
    transition: height 0.3s ease-in-out, background-color 0.3s;
}

#resizable div:hover {
    background-color: blue;
    height: 100px;
    -webkit-transition: height 0.6s ease-in-out, background-color 0.6s;
    -o-transition: height 0.6s ease-in-out, background-color 0.6s;
    -moz-transition: height 0.6s ease-in-out, background-color 0.6s;
    transition: height 0.6s ease-in-out, background-color 0.6s;
}