In this section, we will learn what the transaction property is and how to use it in CSS.
Click here to run the example of transition property.
CSS transition Property Definition and Usage
The CSS `transition` property is a shorthand property by which we can create a smooth transition.
Basically, using this property, we can set values for the following properties in one declaration:
CSS transition Property Syntax
transition: t-property t-duration t-timing-function t-delay;
CSS transition Property Value
As mentioned before, the transition property is a shorthand one by which we can set values for other related properties mentioned above.
So any value we could use for those properties can also be placed as the value of the `transition` property as well.
We can also set multiple transitions as the value for this property and in that case, each transition should be separated using comma ‘,’.
Example:
transition: color 1s, background-color 2s ease-in, font-size 2s ease-out 500ms;
Note: there’s a keyword named “all” that can be used for the value of this property, and if used, it includes the entire properties of the target element in the transition process.
Example: transition in CSS
See the Pen transition in CSS by Omid Dehghan (@enjoytutorials1) on CodePen.
Example: CSS transition property with all value
See the Pen CSS transition property with all value by Omid Dehghan (@enjoytutorials1) on CodePen.
