Abakada: Back to Basics > Language References > CSS Properties > Transition Properties > transition-delay Property

---

Specifies when the transition effect will start.

CSS	{ transition-delay: time }
Script	object.style.transitionDelay = time

Parameter	Description	Valid Values
time	Sets the length of time before a transition starts.	floating point number representing a time value expressed as seconds (s) or milliseconds (ms)

The property is read/write with a default value of 0s; this attribute is not inherited.

The transition-delay property denotes the amount of time to wait before a transition starts. It allows a transition to begin execution after some period of time from when it is applied.

A transition-delay value of 0s means the transition will execute as soon as the property is changed. Otherwise, the value specifies an offset from the moment the property is changed, and the transition will delay execution by that offset.

A positive value delays the start of the transition, while a negative value causes it to begin immediately, potentially partway through the transition.

This example shows the effects of applying different transition-delay values.

Run Sample | View Source

NOTE: This section is currently under major reconstruction. Please bear with whatever inconvenience you may encounter; we hope to complete the job at the soonest possible time.

For a brief overview, please see Understanding and Using CSS Transitions.

transition, transition-property, transition-duration, transition-timing-function, transition-behavior