This is an experimental technology
Check the Browser compatibility table carefully before using this in production.


transition-delay CSS 속성은 transition될 속성이 transition 요청을 받은 이후 실제로 transition하기까지 기다려야하는 시간의 양을 지정합니다.

A value of 0s, or 0ms, indicates that the property will begin to animate its transition immediately when the value changes; positive values will delay the start of the transition effect for the corresponding number of seconds. Negative values cause the transition to begin immediately, but to cause the transition to seem to begin partway through the animation effect.

You may specify multiple delays; each delay will be applied to the corresponding property as specified by the transition-property (en-US) property, which acts as a master list. If there are fewer delays specified than in the master list, missing values are set to the initial value (0s). If there are more delays, the list is simply truncated to the right size. In both case the CSS declaration stays valid.

적용대상all elements, ::before and ::after pseudo-elements
Computed valueas specified
Animation typediscrete


/* <time> values */
transition-delay: 3s;
transition-delay: 2s, 4ms;

/* Global values */
transition-delay: inherit;
transition-delay: initial;
transition-delay: unset;


Is a <time> denoting the amount of time to wait between a property's value changing and the start of the animation effect.

Formal syntax

<time># (en-US)


transition-delay: 0.5s

transition-delay: 1s

transition-delay: 2s

transition-delay: 4s


Specification Status Comment
CSS Transitions
The definition of 'transition-delay' in that specification.
Working Draft Initial definition

Browser compatibility

BCD tables only load in the browser

See also