The transition property is a shorthand property for the:

• transition-delay Property
• transition-duration Property
• transition-property Property
• transition-timing-function Property

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

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

When you hover your cursor over the following element, it will expand to the full width of its parent.

Default value	all 0s ease 0s
Inherited values	no
Can it be animated?	no

These are the allowed values.

Value	Description
transition-property	Specifies the name of the CSS property the transition effect is for
transition-duration	Specifies how many seconds or milliseconds the transition effect takes to complete
transition-timing-function	Specifies the speed curve of the transition effect
transition-delay	Defines when the transition effect will start
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.transition = 'width 0.4s ease-in-out 1s';

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

<script>
function my_function() {
    document.getElementById('my_div').style.transition = 'width 0.4s ease-in-out 1s';
}
</script>

---