CSS transitionproperty Property (original) (raw)

CSS transition-property Property

Last Updated : 29 Aug, 2024

The transition effect is used to display the change in the property of an element over a specified duration. The _transition-property property is used to specify the name of the CSS property for which the transition effect will occur.

**Syntax:

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

**Property values:

• **none: This value is used to specify that no property will get a transition effect.
• **all: All the CSS properties will get a transition effect. This is also the default value for this property.
• **property: We can specify the names of CSS properties for which transition effect will be applied. We can also specify multiple properties by separating them with a comma.
• **initial: Used to set this property to its default value. This value is useful when we don't know the default value for a specific property.
• **inherit: Used to specify that this property will inherit its value from its parent element.

**Example: In the below example, we have specified that none of the properties will get a transition effect. Hence if we hover over the box, the changes in its properties will be sudden rather than transitioning from one value to another over a specified duration.

html `