transition-delay

Overview

The transition-delay property determines the wait time before a transition effect begins. Along with other properties like transition-property, transition-duration, and transition-timing-function, it forms the CSS Transitions module, allowing the creation of intricate animations. Typically, transition-delay is used in scenarios where staggered animations are desirable such as a navigation menu where each item slides in sequentially, or in a gallery where images fade in one after another.

Examples and Usage

In the scope of a simple yet practical application, let's explore transition-delay by constructing a set of colored boxes that, upon hover, will exhibit a staggered transition effect due to the varying delay times.

HTML Structure

<div class="box-container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

In the structure above, we have a container with four child div elements, each representing a colored box.

CSS Styling

Below, we'll style these boxes and add the varying transition effects.

/* Container and Box Styling */
.box-container {
  display: flex;  /* Arrange boxes horizontally */
  justify-content: space-around;  /* Distribute boxes evenly */
}

.box {
  width: 50px;
  height: 50px;
  background-color: #FBBF24;  /* Vibrant color for visibility */
  /* Transition Properties */
  transition-property: height;  /* Property to animate */
  transition-duration: 0.5s;  /* Duration of animation */
}

/* Transition Effects on Hover */
.box-container:hover .box {
  height: 200px;  /* Boxes expand vertically on hover */
}

/* Transition Delay for Each Box */
.box-container .box:nth-child(1) {
  transition-delay: 0s;  /* No delay */
}

.box-container .box:nth-child(2) {
  transition-delay: 200ms;  /* 200ms delay */
}

.box-container .box:nth-child(3) {
  transition-delay: 400ms;  /* 400ms delay */
}

.box-container .box:nth-child(4) {
  transition-delay: 600ms;  /* 600ms delay */
}

Here, the .box class sets the initial styling and transition properties for each box. When the .box-container is hovered over, the height of each .box changes to 200px, triggering the transition effect.

The transition-delay property is then used to specify the waiting time before the transition effect starts for each box. The first box starts immediately (0s), while the other boxes start after respective delays (200ms, 400ms, and 600ms), creating a staggered entrance effect.

Values

The transition-delay property doesn't inherit values from its parent elements, and the initial value is 0s.

Associated Properties

• transition
• transition-property
• transition-duration
• transition-timing-function

Tips and Tricks

• transition-delay can be used to create complex, sequenced animations by staggering the start times of transitions on multiple elements or properties.

• Use transition-delay in conjunction with transition-duration to fine-tune the timing of animations for a seamless and visually engaging user experience.

• When using transition-delay with multiple properties, you can define different delay times for each property. These are applied according to their order in the transition-property list.

• If there are fewer delay times than properties, the list of delays is repeated. Conversely, if there are more delay times than properties, the extra delay times are ignored. This allows for greater flexibility in creating intricate animations.

• Keep in mind that excessive or poorly-timed delays can negatively impact user experience, so it's essential to strike a balance between aesthetic appeal and usability.

Browser Compatibility

Most modern browsers support the transition-delay property without the need for prefixes. However, older versions of Chrome, Safari, and Firefox, require vendor prefixes for proper functioning. Refer to the Useful Resources section below for more specific information.

Caution: Internet Explorer support data may be incorrect since MDN browser-compat-data no longer updates it. Also, early Edge versions used EdgeHTML, leading to mismatched version numbers. From version 79, Edge uses Chromium with matching version numbers.

Useful Resources

Can I use: transition-delay

W3C: CSS Transitions - transition-delay property