CSS transition-delay Property
CSS transition-delay Property
CSS transition-delay property specifies the duration to wait before the transition effect starts.
Example
<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
#outerDiv p{
width: 100%;
text-align: center;
}
#outerdiv{
width: 100%;
height: 150px;
border: 1px solid #267326;
padding: 10px;
display: flex;
position: relative;
text-align: center;
}
#innerdiv{
width: 80px;
height: 80px;
background-color: teal;
color: #fff;
line-height: 4;
border: 1px solid #004d4d;
position: absolute;
top: 5%;
left: 1%;
transition: left 1s;
-webkit-transition: left 1s;
transition-delay: 2s;
-webkit-transition-delay: 2s
}
#outerDiv:hover > #innerdiv{
left: 85%;
}
</style>
</head>
<body>
<h1>CSS transition-delay Property</h1>
<div id="outerDiv">
<p>Hover Me</p>
<div id="innerDiv">Div</div>
</div>
</body>
</html>
Syntax
Using CSS
element{
transition-delay: 1s;
}
Using Javascript
object.style.transitionDelay="1s";
Animatable
No, transition-delay property is not animatable. CSS Animatable Properties Reference.
Default Value
Default value for CSS transition-delay property is 0s.
Property Value
The following table provides a list of values for CSS transition-delay property.
| Value | Explanation |
|---|
| time | Specifies the number of seconds or milliseconds to wait before the transition effect will start.- A value of 0s (or 0ms) will begin the transition effect immediately.
- A positive value will delay the start of the transition effect for the given length of time.
- A negative value will begin the transition effect immediately, and partway through the effect.
|
Using JavaScript
In the following example, we will demonstrate how to change the CSS transition-delay property of an element using JavaScript.
Example
<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
#outerDiv p{
width: 100%;
text-align: center;
}
#outerdiv{
width: 100%;
height: 150px;
border: 1px solid #267326;
padding: 10px;
margin-bottom: 25px;
display: flex;
position: relative;
text-align: center;
}
#innerdiv{
width: 80px;
height: 80px;
background-color: teal;
color: #fff;
line-height: 4;
border: 1px solid #004d4d;
position: absolute;
top: 5%;
left: 1%;
transition: left 1s;
-webkit-transition: left 1s;
}
#outerDiv:hover > #innerdiv{
left: 85%;
}
</style>
</head>
<body>
<h1>CSS transition-delay Property</h1>
<div id="outerDiv">
<p>Hover Me</p>
<div id="innerDiv">Div</div>
</div>
<button onclick="myFunction()">Click Me</button>
<script>
var x = document.getElementById("innerDiv");
function myFunction(){
x.style.transitionDelay = "2s";
x.style.WebkitTransitionDelay = "2s";
}
</script>
</body>
</html>
Reminder
Hi Developers, we almost covered 98.7% of CSS Tutorials with examples for quick and easy learning.
We are working to cover every Single Concept in CSS.
Please do google search for:
Join Our Channel
Join our telegram channel to get an instant update on depreciation and new features on HTML, CSS, JavaScript, jQuery, Node.js, PHP and Python.
This channel is primarily useful for Full Stack Web Developer.
Share this Page
Meet the Author
