How to Use the CSS3 Transition Property

Along with the introduction of CSS3 comes many new features that are available for use in creating great effects; one of the most useful is the transition property. The transition property is an important new development in CSS. It can be used to create a dynamic change effect on a div or class using a simple structure. CSS3's transition is a great way to add a little animation to sites without the large overhead of a JavaScript library like jQuery.

Property
Firstly, in order for the transition property to work, the standard property that it will be applied, needs to be defined. Arguably the two most common properties that will be defined are width and height.
Size Change
Following on, once the property has been defined then the start and end values need to be assigned. In the case of values such as width or height the property needs to be set with a start value and then an end value with some other condition. For example, here David Pickett sets the transition property to width, then the start value of width and then set the end value when the element is hovered over.
Duration
Now that he has defined the property to transform, the start and end values, he needs to define the duration of the transition. This is achieved by defining a length in either seconds or milliseconds.