The CSS transition-delay property specifies a duration to wait before a transition effect begins. This allows you to control the timing of animations, creating sequenced or staggered effects. The value is defined in seconds (s) or milliseconds (ms).
Example 1: Basic Delay on Hover
/* This is the initial state of the button */
.btn-1 {
background-color: #3498db;
color: white;
padding: 10px 20px;
border: none;
transition-property: background-color;
transition-duration: 0.5s;
/* The transition will wait 1 second before starting */
transition-delay: 1s;
}
/* This is the state of the button on hover */
.btn-1:hover {
background-color: #2980b9;
}
Explanation When you hover over this button, the background-color change is not immediate. The transition-delay: 1s; rule makes the browser wait for one second before the half-second transition to the new color begins.
Example 2: Delay in Milliseconds
/* Styling for a simple animated box */
.box-2 {
width: 100px;
height: 100px;
background-color: #e74c3c;
transition-property: transform;
transition-duration: 0.4s;
/* Delay is set to 500 milliseconds (half a second) */
transition-delay: 500ms;
}
/* The box will rotate when hovered */
.box-2:hover {
transform: rotate(45deg);
}
Explanation This example uses milliseconds (ms) for the delay. After hovering over the box, there's a 500ms pause before the transform property animates, rotating the element by 45 degrees.
Example 3: Multiple Delayed Transitions
/* A card element with multiple transitions */
.card-3 {
width: 200px;
background-color: #f1c40f;
padding: 20px;
transition-property: background-color, transform;
transition-duration: 0.5s, 0.3s;
/* background-color has a 0.5s delay, transform has a 1s delay */
transition-delay: 0.5s, 1s;
}
/* Applying the transformations on hover */
.card-3:hover {
background-color: #f39c12;
transform: scale(1.1);
}
Explanation You can apply different delays to multiple properties by providing a comma-separated list. Here, the background-color transition starts after 0.5 seconds, while the transform (scaling) transition waits for 1 second.
Example 4: Using the transition Shorthand Property
/* An element styled with the transition shorthand property */
.link-4 {
color: #2ecc71;
text-decoration: none;
font-size: 20px;
/* Shorthand: property duration timing-function delay */
transition: color 0.4s ease-in-out 0.2s;
}
/* Changing color on hover */
.link-4:hover {
color: #27ae60;
}
Explanation The transition shorthand property lets you set all transition values in one line. In this case, 0.2s at the end of the declaration is the transition-delay, which postpones the color change.
Example 5: Staggered Animation Effect
/* Styling for list items */
.list-5 li {
opacity: 0;
transform: translateY(20px);
transition: all 0.5s ease-out;
}
/* When the parent is hovered, trigger transitions on children */
.list-5:hover li {
opacity: 1;
transform: translateY(0);
}
/* Applying a different delay to each list item */
.list-5 li:nth-child(1) { transition-delay: 0.1s; }
.list-5 li:nth-child(2) { transition-delay: 0.2s; }
.list-5 li:nth-child(3) { transition-delay: 0.3s; }
Explanation By assigning an incremental transition-delay to each list item, we create a staggered or cascading effect. When the list is hovered, the items appear one after another instead of all at once.
Example 6: Delay on Mouse Out Only
/* The element has an immediate transition on hover */
.shape-6 {
width: 100px;
height: 100px;
background-color: #9b59b6;
border-radius: 50%;
transition: all 0.5s;
transition-delay: 0s; /* No delay on mouse in */
}
/* On hover, the delay is set to 1 second */
.shape-6:hover {
background-color: #8e44ad;
transform: scale(1.2);
transition-delay: 1s; /* Delay applies when moving from hover to non-hover state */
}
Explanation This code creates an interesting effect where the transition is immediate upon hovering. However, when the mouse leaves the element, the transition-delay from the :hover state is applied, delaying the return to the original state.
Example 7: Negative Transition Delay
/* A loading bar with a negative delay */
.loader-7 {
width: 0%;
height: 10px;
background-color: #1abc9c;
transition: width 5s linear;
/* The transition will start as if it has already been running for 2 seconds */
transition-delay: -2s;
}
/* Hovering will trigger the width animation */
body:hover .loader-7 {
width: 100%;
}
Explanation A negative transition-delay causes the transition to begin immediately, but it starts partway through the animation. In this example, the width animation of 5 seconds will begin as if 2 seconds have already passed.