Experimental: 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
계산 값as specified
Animation typeNot animatable


/* <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

transition-delay = 


transition-delay: 0.5s

transition-delay: 1s

transition-delay: 2s

transition-delay: 4s


CSS Transitions
# transition-delay-property

브라우저 호환성

BCD tables only load in the browser

See also