Transition Delay Property in CSS and Javascript

|
| By Webner

What is Transition Delay?

Transition delay specifies the amount of time for the change to take place in css properties of DOM elements. Transition Delay value is defined in seconds (s) or milliseconds(ms).

How to implement Transition Delay in CSS?

For understanding how to implement Transition Delay in CSS, have a look at the

following example:

HTML:

<div class=”box”></div>

CSS:

.box{ 
width: 200px; 
height: 200px; 
background-color: red; 
-webkit-transition-delay: 2s;     //Chrome and Safari 
-moz-transition-delay: 2s;       // Mozilla 
-o-transition-delay: 2s;        // Opera 
transition-delay: 2s;          // Internet Explorer 
} 
.box:hover{ 
background-color: blue; 
}

In the above example, prefix with transition-delay property represents the browser to support this property. Prefix is required to support Transition Delay property in the browser. Following screenshot shows the CSS properties of DOM element div having class ‘box’.

When we will hover on this div element having class ‘box’, its background color will change from red to blue after 2 seconds. It will change after 2 seconds because we have specified transition-delay property value as 2s. When the transition-delay value is specified in negative value then delay is removed and change is visible immediately.

How to implement Transition Delay in Javascript

HTML, CSS and Javascript code have been provided below to implement Transition Delay:

HTML:

<div class=”box” id=”box” onmouseover="myFunction()"></div>

CSS:

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

Javascript:

<script type="text/javascript">
function myFunction(){
document.getElementById("box").style.WebkitTransitionDelay="2s"; 
// For Safari 3.1 to 6.0 
document.getElementById("box").style.transitionDelay="2s"; 
// Standard syntax         }
</script>

Leave a Reply

Your email address will not be published. Required fields are marked *