이 페이지는 영어로부터 커뮤니티에 의하여 번역되었습니다. MDN Web Docs에서 한국 커뮤니티에 가입하여 자세히 알아보세요.

transition-delay

Experimental

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

Summary

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.

초기값0s
적용대상all elements, ::before and ::after pseudo-elements
상속no
Computed valueas specified
Animation typediscrete

Syntax

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

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

Values

<time>
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)

Examples

transition-delay: 0.5s

transition-delay: 1s

transition-delay: 2s

transition-delay: 4s

Specifications

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

Browser compatibility

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 -webkit (en-US) 4.0 (2.0) -moz (en-US)
16.0 (16.0)[1]		 10.0 11.6 -o (en-US)
12.10		 3.0 -webkit (en-US)
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 2.1 -webkit (en-US) 4.0 (2.0) -moz (en-US)
16.0 (16.0)[1]		 ? 10.0 -o (en-US)
12.10[2]		 3.2 -webkit (en-US)

[1] In addition to the unprefixed support, Gecko 44.0 (Firefox 44.0 / Thunderbird 44.0 / SeaMonkey 2.41) added support for a -webkit prefixed version of the property for web compatibility reasons behind the preference layout.css.prefixes.webkit, defaulting to false. Since Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46) the preference defaults to true.

[2] See blog post about Opera 12.50.

See also