CSS3 Transitions allow web developers to introduce effects by allowing property changes in CSS values. These changes are generally defined to occur when certain events occur, such as :hover or :focus.
Transitions specify how they should transition and over what duration of time. Transition effects can be applied to a wide variety of CSS properties such as width, height, background color, opacity, and others.
Browser Support
Internet Explorer 9 does not support the transition property. Other browsers such as Internet Explorer 10, Firefox, Chrome, Safari, and Opera do provide support but implement vendor prefixes. So, for the time being, you will need to use several vendor prefixes in your code for a cross-browser solution.
How do Transitions Work?
CSS3 transitions are effects that let an element gradually change from one style to another. To accomplish this effect, you need to specify the CSS property you want to add an effect to and the duration of the effect.
Transition Property
The transition property is a shorthand property for setting the four transition properties into a single property.
Transition Property Syntax
transition: property duration timing-function delay;
Examples
Here is a simple example that changes the width of an element using a simple transition. Since the transition-timing function value is not defined, the default value of ease will apply.