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;
}
To see the cross-fade in action.
https://www.htmlgoodies.com/imagesvr_ce/9178/cf.html

Rotating Box

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

To see the spinning div in action.

https://www.htmlgoodies.com/imagesvr_ce/1537/rotate.html

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;
}
To see the resizable boxes in action.
https://www.htmlgoodies.com/imagesvr_ce/4602/resizable.html