Tailwind CSS Transition Property (original) (raw)

Last Updated : 23 Jul, 2025

This class accepts lots of value in tailwind CSS in which all the properties are covered in class form. The transition-property class is used to specify the name of the CSS property for which the transition effect will occur. In CSS, we have done that by using the CSS transition-property.

**Transition Property classes:

• **transition-none: This value is used to specify that no class will get a transition effect.
• **transition-all: All the class will get a transition effect. This is also the default value for this class.
• **transition: 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.
• **transition-colors: This value is used to specify that the color class will get a transition effect.
• **transition-opacity: This value is used to specify that the opacity class will get a transition effect.
• **transition-shadow: This value is used to specify that the shadow class will get a transition effect.
• **transition-transform: This value is used to specify that the transformation into a defined shape.

**Syntax:

...

**Example:

HTML `

GeeksforGeeks

`

**Output: