This CSS attribute determines the timing for initiating the transition animation. The value assigned to this attribute can be in seconds (s) or milliseconds (ms). CSS transitions are visual effects applied to smoothly transform an element's style from one state to another, eliminating the need for flash or JavaScript.
By omitting the utilization of transition-delay, the animation initiates upon hovering over the element; however, by incorporating this CSS attribute, we are able to postpone the animation by a specified duration.
Syntax
transition-delay: time | initial | inherit;
The transition-delay property has a default value of 0, indicating that the transition will commence instantly with no delay.
Property values
time: It indicates the duration (in seconds or milliseconds) to delay before the transition commences.
It assigns the default value to this property.
It acquires this attribute from its ancestor element.
The delay can be negative, positive, or zero.
The transition-delay property's negative value triggers the transition effect instantly, making it appear as if it had already started. On the other hand, a positive value initiates the transition effect after a specified amount of time.
We have the option to define multiple time gaps to aid in transitioning various attributes. Each specified delay is assigned to the corresponding attribute based on the transition-property property. For instance, if two transition-delay values are supplied, the initial value impacts the first attribute specified by the transition-property property, while the subsequent transition-delay influences the second attribute in the property list provided by the transition property.
Let's explore a few instances showcasing the transition-delay attribute.
Example1
In this instance, we are employing the transition-property, transition-duration, and transition-delay attributes. A 0.5-second delay is set to initiate the transition effect, meaning the background hue of the div container will alter following the specified duration.
<!DOCTYPE html>
<html>
<head>
<title>
CSS transition-delay Property
</title>
<style>
div{
width: 100px;
height: 100px;
background: lightblue;
transition-property: background-color;
transition-duration: 1s;
transition-delay: 0.5s;
/* For Safari browser */
-webkit-transition-property: background-color;
-webkit-transition-duration: 1s;
-webkit-transition-delay: 0.5s;
}
div:hover {
background-color: brown;
}
</style>
</head>
<body>
<div></div>
<p> Move the cursor over the div element above, to see the transition effect. </p>
</body>
</html>
Output
Example2
In this instance, we have two division elements. Within the initial div, the transition-delay property is set to the value "initial." Conversely, in the subsequent div, a negative value of -2 seconds is assigned to the transition-delay property. To observe the transition effect, it is necessary to hover the cursor over the div elements.
<!DOCTYPE html>
<html>
<head>
<title>
CSS transition-delay Property
</title>
<style>
p{
font-size: 20px;
}
.first{
width: 150px;
height: 150px;
background-color: lightblue;
transition-property: width;
transition-duration: 1s;
transition-delay: initial;
/* For Safari browser */
-webkit-transition-property: width;
-webkit-transition-duration: 1s;
-webkit-transition-delay: initial;
}
.second{
width: 150px;
height: 150px;
background-color: lightgreen;
transition: width 1s, height 2s, background-color 2s;
transition-delay: -2s;
}
.first:hover {
width: 300px;
}
.second:hover{
width: 250px;
height: 250px;
background-color: brown;
}
</style>
</head>
<body>
<center>
<h2> Example of transition-delay Property </h2>
<p> Move the cursor over the div element, to see the transition effect. </p>
<div class = "first">
<p> transition-delay: initial </p>
</div>
<div class = "second">
<p> transition-delay: -2s </p>
</div>
</center>
</body>
</html>
Output
Example
Now, let's consider another instance showcasing a combination of various transition effects. In this case, the transitions are applied to attributes such as width, height, and transformation. Additionally, a transition-delay of 2.5 milliseconds (ms) is incorporated.
<!DOCTYPE html>
<html>
<head>
<style>
div {
padding:15px;
width: 200px;
height: 200px;
background: lightgreen;
transition: background-color 1s, width 2s, height 2s, transform 2s;
transition-delay: 1.5ms;
}
p{
font-size: 20px;
}
div:hover {
width: 300px;
height: 300px;
-webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
transform: rotate(360deg);
background-color: orange;
}
</style>
</head>
<body>
<div>
<h2>C# Tutorial</h2>
<p> (Move your cursor on me to see the effect)</p></div>
</body>
</html>
Output