CSS transition-delay

The CSS transition-delay property is used to specify the delay before a CSS transition starts when the value of a property changes. Transitions in CSS allow you to animate property changes smoothly over a specified duration.

The transition-delay property sets the time delay (in seconds or milliseconds) before the transition begins after the triggering event (such as a hover or a class change) occurs. This delay can be used to control when the transition effect starts, giving you more precise control over the timing of animations.

The syntax for the transition-delay property is:

transition-delay: time;

• time: The time delay before the transition starts. It can be specified in seconds (s) or milliseconds (ms). Negative values are invalid and will be ignored.

Example:

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition-property: width;
  transition-duration: 1s;
  transition-delay: 0.5s;
}

.box:hover {
  width: 200px;
}

In this example, the .box element will transition from a width of 100px to 200px when hovered. However, the transition effect will start with a delay of 0.5s after the hover event occurs. This means that when you hover over the box, there will be a half-second delay before the width change takes effect and animates smoothly over a duration of 1s.

You can use transition-delay along with other transition-related properties like transition-property and transition-duration to create more complex and finely-tuned animations. It’s a useful tool for creating elegant and sophisticated effects on web elements.

Keep in mind that transitions require a specific event, such as :hover, :focus, or class changes, to be triggered. Without an event, the transition won’t start, and the property change will happen instantly. Additionally, be mindful of using too many simultaneous transitions with delays, as they may result in overly complex and potentially jarring animations.