In this section, we will learn what the transition-property property is and how to use it in CSS.

Click here to run the example of transition-property property.

CSS transition-property Property Definition and Usage

The `transition-property` accepts one or more properties’ name. These properties are the target of the smoothing transition and when the value of these properties changed for any particular reason (mouse cursor hovers over the element, etc.), the process of changing from one value to another becomes smooth.

Note: We also need to set the `transition-duration` property, which declares how long a transition should take. This property is explained in `transition-duration` section.

CSS transition-property Property Syntax

transition-property: none|all|property|initial|inherit;

CSS transition-property Property Value

The values of this property is the name of those properties we want to smooth their transitions from one value to another.

There is also one special value we can set for this property:

• all: using this value means all the properties of the target element should be smoothed in their transition from one value to another.

The two global values, “initial” and “inherit” can also be used for this property.

Example: transition-property in CSS

(Bring the mouse cursor over the boundary of the paragraph)

See the Pen transition-property in CSS by Omid Dehghan (@enjoytutorials1) on CodePen.

Example: CSS transition-property property

(Bring the mouse cursor over the boundary of the paragraph)

See the Pen CSS transition-property property by Omid Dehghan (@enjoytutorials1) on CodePen.

However, be aware that not all properties can be smoothed out. For example, `text-transform` property is one of those properties that cannot be smoothed.

Example: CSS transition-property and not supported properties

See the Pen CSS transition-property and not supported properties by Omid Dehghan (@enjoytutorials1) on CodePen.