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 value | as specified |
| Animation type | discrete |
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
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
BCD tables only load in the browser