🎯 CSS transition-property

The transition-property defines which CSS property will be animated when a transition occurs. It tells the browser exactly which style changes should be smoothly animated instead of instantly applied.

This property is used together with other transition properties like duration and timing function to create controlled animations.

Applies the transition effect to all CSS properties that change. This is the default behavior.

.box {
    transition-property: all;
}
                

If multiple properties like width and background-color change, both will animate.

You can specify a single CSS property to animate. Only that property will transition smoothly.

.box {
    transition-property: background-color;
    transition-duration: 0.4s;
}

.box:hover {
    background-color: red;
}
                

In this case, only background-color animates. Other properties change instantly.

Resets the property to its default value (all).

.box {
    transition-property: initial;
}
                

The following example shows how only one property can be animated while others change instantly.

.box {
    width: 100px;
    height: 100px;
    background-color: blue;
    transition-property: width;
    transition-duration: 0.5s;
}

.box:hover {
    width: 200px;
    background-color: red;
}
                

Only the width animates smoothly, while the background color changes instantly.

The transition-property property gives precise control over which CSS changes should animate. This helps create more optimized and intentional animations.

• Control specific animations
• Avoid unnecessary animations
• Improve performance
• Create cleaner UI effects
• Combine with duration and timing functions