An Introduction to CSS3 Transitions by Software RVG
Posted by Rober Villar Garcia - Mozilla Hispano collaborator.
CSS3 Transitions are a presentational effect which allow property changes in CSS values, such as those that may be defined to occur on :hover or :focus, to occur smoothly over a specified duration – rather than happening instantaneously as is the normal behaviour.
Transition effects can be applied to a wide variety of CSS properties, including background-color, width, height, opacity, and many more. Keep reading for further details of supported properties.
At present the CSS3 Transitions module is at the working draft stage of development, and as such elements of the specification and syntax could still be liable to change. Although browser support is relatively widespread, for the time being you’ll need to use several vendor prefixes in your code for a cross-browser solution.
Here’s a basic example. The boxes below initially have an orange background, with the color set to change to green on :hover. For the first box no transition is specified, so the change occurs instantaneously. For the second box a transition with a duration of 5 seconds is specified, as such the change occurs smoothly over the given duration and automatically reverses when the mouse is moved off the element.
