The following is excerpted from CSS Animation: An Interactive Guide by Vicki Murley.
When the value of a CSS property changes, a web browser immediately renders the result of that change. For example, if you use JavaScript to change the value of the opacity property on an element from 1 to 0, the element immediately disappears. CSS Transitions allow changes in CSS property values to occur smoothly over a period of time, thus creating an animated effect.
Full story from the iMore Blog...