transition property is a shorthand property for setting the values of longhand properties:
transition-delay. This property allows you to define the transition between two states of an element. Different states may be defined using pseudo-classes like
The initial value of CSS
transition property is as each of the properties of the shorthand:
transition-delay - 0s,
transition-duration - 0s,
transition-property - all, and
transition-timing-function - ease. You can apply this property to all elements including
::after pseudo-elements. This property is not inheritable. The final computed value of this property is a combination of the final computed value of each of the properties of the shorthand. This property is not animatable.
Please keep in mind that the order of different longhand properties within the
transition property is important. The first value that can be parsed as a time is assigned to the
transition-duration, and the second value that can be parsed as a time is assigned to
This is the formal syntax for using transition property.
transition: <single-transition> [ ',' <single-transition> ]* where <single-transition> = [ none | <single-transition-property> ] || <time> || <single-transition-timing-function> || <time>
Here are some examples of using this property.
/* Apply to 1 property */ /* property name | duration */ transition: margin-left 4s; /* property name | duration | delay */ transition: margin-left 4s 1s; /* property name | duration | timing function | delay */ transition: margin-left 4s ease-in-out 1s; /* Apply to 2 properties */ transition: margin-left 4s, color 1s; /* Apply to all changed properties */ transition: all 0.5s ease-out; /* Global values */ transition: inherit; transition: initial; transition: unset;
One or multiple comma-separated transitions where each transition is defined using the four longhand transition properties.
The CSS3 Transitions property is fully supported in 94.29% browsers and partially supported in 0% browsers. Therefore, its overall browser support is 94.29%.
This property is fully supported in IE 10+, Edge 12+, Firefox 16+, Chrome 26+, Safari 7+, Opera 15+, iOS Safari 8+, Android 53+ and Chrome for Android 56+. Support listed is for
transition properties as well as the
In Chrome (up to 43.0), for CSS
transition-delay property, either explicitly specified or written within transition property, the unit cannot be omitted even if the value is 0.
IE10 & IE11 are reported to not support transitioning the
Browser support data has been taken from caniuse.com.
- Read more about the CSS
<transition>property on MDN.
- You can also read the CSS
<transition>property on CSSWG.
2. As a registered user, you will also get to access features like choosing between a light and dark theme or anything else that we might implement in future.