A transition delay specifies how long to wait after a property value changes before its transition begins. A delayed button color change starts only after the pointer remains over the button for the specified interval. section 15.1
Use delay to control the order and rhythm of related changes:
- Pair opacity with visibility so an element fades out before becoming hidden. A zero-duration visibility transition delayed by 0.2 seconds lets opacity finish first. section 15.3.2
- Override the delay when the element appears: set visibility immediately, then let opacity fade in. section 15.3.2
- Stagger repeated elements by assigning progressively longer delays with :nth-child(), creating a rolling wave instead of simultaneous motion. section 16.2.3
Hide a fading menu without blocking clicks
Set the closed state to `visibility: hidden` and `opacity: 0`, then use `transition: opacity 0.2s linear, visibility 0s linear 0.2s`. In the open state, set `visibility: visible`, `opacity: 1`, and `transition-delay: 0s`. The menu fades out before becoming unavailable, while opening makes it visible immediately. section 15.3.2
Listing 15.9 Using a transition delay to manipulate when visibility changes
.dropdown__drawer {
position: absolute;
background-color: var(--background-color);
width: 10em;
visibility: hidden; #1
opacity: 0; #1
transition:
opacity 0.2s linear,
visibility 0s linear 0.2s; #2
}
.dropdown.is-open .dropdown__drawer {
visibility: visible; #3
opacity: 1; #3
transition-delay: 0s; #4
}
Shows the complete opacity-and-visibility pattern, including the delayed closed state and immediate open-state override. section 15.3.2
