The transition-property property specifies the name of the CSS property the transition effect will apply to.

The following will animate the width, on hover, after a delay of 250 milliseconds, over the course of 0.4 seconds, using ease-in-out.

div {
    width: 50%;
    transition-property: width;
    transition-duration: 0.4s;
    transition-timing-function: ease-in-out;
    transition-delay: 250ms;
}
div:hover {
    width: 100%;
}

Default value	all
Inherited values	no
Can it be animated?	no

These are the allowed values.

Value	Description
none	No property will get a transition effect
all	All properties will get a transition effect (default)
property	Defines a comma separated list of CSS property names the transition effect will apply to
initial	Sets this property to its default value
inherit	Inherits this property from its parent element

The HTML element can also be styled using JavaScript and the element’s id.

document.getElementById('my_div').style.transitionProperty = 'width';

<button onclick='my_function()'>Click Here</button>

<script>
function my_function() {
    document.getElementById('my_div').style.transitionProperty = 'width';
}
</script>

---