The transition-delay property specifies when the transition effect will start, and is defined in seconds (s) or milliseconds (ms).

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	0s
Inherited values	no
Can it be animated?	no

These are the allowed values.

Value	Description
time	Specifies the number of seconds or milliseconds to wait before 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.transitionDelay = '1s';

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

<script>
function my_function() {
    document.getElementById('my_div').style.transitionDelay = '1s';
}
</script>

---