CSS transition-delay Property

CSS transition-delay property specifies how long the transition should wait before it starts.

The transition delay is specified either in seconds(s) or milliseconds(ms). By default, it is set to 0s, which means that the transition starts instantly.

Hover over the below box at least 2 seconds to see the transition delay effect:

Hover Over Me!!!

(Hover at least 2 seconds)

Example:

div{
  transition-delay: 2s;
  transition-property: width;
}

The transition-delay property can also take multiple values. Each value will be applicable to the corresponding transition property only. See the example below:

Example:

div{
  transition-delay: 1s, 2s;
  transition-property: height, width;
}

CSS Syntax

The transition-delay property has the following syntax:

transition-delay: time| initial | inherit;

Property Values

The transition-delay property accepts the following values:

timeSpecifies the time taken by a transition before starting. It can be 0, positive, or negative.
initialSets the transition-delay property to its default value. Which is 0s.
inheritInherits the transition-delay property from its parent element.

General Info

Default Value0s
InheritedNo
JavaScript Usageelement.style.transitionDelay = “2s”

Author

  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.

Leave a Comment