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
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. Here is an example that shows the different timing functions.
Multiple Transitions
To add a transitional effect for more than one style, add more properties, separated by commas
