How to set when the transition effect will start with JavaScript?
To set when the transition effect will start, use the JavaScript transitionDelay property. You can try to run the following code to learn how to return when the transition effect will start with JavaScript −
Example
<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
position: relative;
margin: 10px;
height: 300px;
width: 400px;
padding: 20px;
border: 2px solid blue;
}
#div2 {
padding: 80px;
position: absolute;
border: 2px solid BLUE;
background-color: yellow;
transform: rotateY(45deg);
transition: all 5s;
}
#div2:hover {
background-color: orange;
width: 50px;
height: 50px;
padding: 100px;
border-radius: 50px;
}
</style>
</head>
<body>
<p>Hover over DIV2</p>
<button onclick = "display()">Set</button>
<div id = "div1">DIV1
<div id = "div2">DIV2</div>
</div>
<script>
function display() {
document.getElementById("div2").style.transitionTimingFunction = "ease-in";
document.getElementById("div2").style.transitionDelay = "1s";
}
</script>
</body>
</html>
Published on 27-Feb-2018 14:44:51
