transition-delay
트랜지션이 시작되기 전의 대기 시간을 설정합니다. 일반적으로 축약형 tall에 타이밍을 포함하여 사용하며, 개별 제어가 필요할 때 사용합니다.
클래스 목록
| 클래스 | CSS | 설명 |
|---|---|---|
tde200ms | transition-delay: 200ms | 지연 시간 지정 (기본 형태). ms 또는 s |
tde0-5s | transition-delay: 0.5s | 소수점은 하이픈으로 (0-5s = 0.5s) |
tde100ms_200ms | transition-delay: 100ms, 200ms | 여러 값은 언더스코어로 구분 |
tdi | transition-delay: inherit | 부모의 transition-delay 값을 상속 |
tdini | transition-delay: initial | 초기값(0s)으로 리셋 |
tdr | transition-delay: revert | 사용자 에이전트 기본값으로 되돌림 |
tdrl | transition-delay: revert-layer | 이전 캐스케이드 레이어의 값으로 되돌림 |
tdun | transition-delay: unset | 상속 가능하면 inherit, 아니면 initial |
시각 도식
가로축은 시간입니다. 회색 구간은 아무 일도 일어나지 않는 대기 시간이고, 파란 구간이 실제로 값이 변하는 300ms입니다. 지연을 준다고 애니메이션이 느려지는 것이 아니라 시작만 뒤로 밀린다는 점이 한눈에 보입니다.
사용 예시
축약형 transition 클래스와 함께 사용하여 딜레이를 별도로 제어할 수 있습니다.
<!-- Delay inheritance -->
<div class="tall200msease">
<span class="tdi hover-cFFFFFF">Inherits parent delay</span>
</div>
<!-- Delay reset -->
<div class="tall300msease">
<button class="tdini hover-bg6366F1">Instant transition without delay</button>
</div>클래스별 상세
tde200mstransition-delay: 200ms
지연 시간을 직접 지정하는 기본 형태입니다. 클래스 이름의 숫자와 단위가 그대로 값이 되며, 밀리초와 초를 모두 쓸 수 있습니다. 툴팁이 뜨기 전 잠깐 기다리게 하거나, 메뉴가 닫히기 전 여유를 주는 데 씁니다.
<!-- Tooltip that waits until the pointer has settled -->
<div class="pr dib">
<button class="bg1E1E2E b1pxsolid27272A br6px py12px px16px fs14px cFAFAFA">
Usage
</button>
<span class="tde200ms tall200msease o0 hover-o100
pa t0 l0 bg18181B b1pxsolid27272A br6px p12px fs13px cA1A1AA">
Counted per calendar month.
</span>
</div>tde0-5stransition-delay: 0.5s
소수점이 필요한 값은 하이픈으로 씁니다. 클래스 이름에는 점을 쓸 수 없기 때문이며, 읽을 때는 하이픈을 소수점으로 바꿔 읽으면 됩니다.
<!-- Half a second, written with a hyphen for the decimal point -->
<div class="tde0-5s tall300msease o0 hover-o100">
Appears half a second after the state changes.
</div>tde100ms_200mstransition-delay: 100ms, 200ms
대상 속성이 여러 개일 때 각각 다른 지연을 줍니다. 밑줄이 목록 구분자이며, 값의 순서는 대상 속성의 순서와 짝을 이룹니다. 색은 즉시, 이동은 조금 늦게 시작하는 식의 연출에 씁니다.
<!-- Color starts at 100ms, transform at 200ms -->
<button class="tpcolor_transform tde100ms_200ms tall300msease
cA1A1AA hover-cFFFFFF hover-ts1-05">
Staggered within a single element
</button>tditdinitdrtdrltdun전역 키워드
부모 값을 물려받거나, 초깃값으로 되돌리거나, 이전 계층의 값으로 돌아가는 값들입니다. 공통 컴포넌트가 걸어 둔 지연을 특정 위치에서만 해제해야 할 때 주로 씁니다.
<!-- Shared component sets a delay, one instance opts out -->
<nav class="tde200ms">
<a class="tdini tall200msease cA1A1AA hover-cFFFFFF tdn">
This link reacts immediately
</a>
</nav>실전 예시 — 메뉴 열기와 툴팁
툴팁은 마우스가 잠깐 머물렀을 때만 뜨도록 지연을 주고, 하위 메뉴는 포인터가 대각선으로 지나갈 여유를 주기 위해 닫힘에만 지연을 둡니다.
<!-- Submenu: opens at once, closes late so the pointer can travel -->
<li class="pr">
<a class="fs14px cFAFAFA tdn">Products</a>
<ul class="tde200ms tall200msease o0 hover-o100
pa t0 l0 bg18181B b1pxsolid27272A br8px p16px">
<li class="fs14px c71717A py6px">Platform</li>
<li class="fs14px c71717A py6px">Integrations</li>
<li class="fs14px c71717A py6px">Pricing</li>
</ul>
</li>
<!-- Tooltip: same idea, longer wait, because it is purely informational -->
<span class="tde0-5s tall200msease o0 hover-o100
fs13px cA1A1AA">
Shown only if you really stop here.
</span>팁 / 주의사항
들어올 때와 나갈 때 모두 적용된다
지연은 상태가 바뀌는 모든 방향에 적용됩니다. 마우스를 올릴 때만 기다리게 하고 뗄 때는 즉시 사라지게 하려면, 기본 상태와 마우스 올린 상태에 서로 다른 지연 값을 지정해야 합니다.
애니메이션을 느리게 만드는 값이 아니다
지연은 시작 시점만 미룹니다. 변화가 굼떠 보인다면 지속 시간 쪽을 조정해야 하며, 지연을 늘리면 반응이 없는 것처럼 느껴질 뿐입니다.
긴 지연은 고장으로 오해받는다
클릭이나 입력에 대한 반응에는 지연을 거의 두지 않는 편이 좋습니다. 사용자는 100ms만 지나도 반응이 없다고 느끼므로, 지연은 마우스를 올렸을 때의 툴팁처럼 의도적으로 기다려야 하는 곳에만 쓰세요.
값의 개수가 대상 속성보다 적으면 되풀이된다
대상 속성이 셋인데 지연 값이 둘이면 첫 값이 다시 순환해 세 번째에 적용됩니다. 순서가 어긋나 보일 때는 개수부터 맞춰 보세요.
연쇄 등장에는 요소마다 다른 값이 필요하다
목록이 차례로 나타나는 연출은 항목마다 지연 값을 조금씩 키워 만듭니다. 항목 수가 유동적이라면 클래스를 일일이 붙이기보다 코드에서 값을 계산해 넣는 편이 낫습니다.
축약형에 딜레이 포함 가능
대부분의 경우 tall200msease 같은 축약형으로 충분합니다. transition-delay를 별도로 지정하는 경우는 다른 속성과 다른 딜레이가 필요할 때입니다.
연쇄 애니메이션에 활용
여러 요소에 서로 다른 딜레이를 주면 순차적으로 나타나는 연쇄 애니메이션(staggered animation) 효과를 만들 수 있습니다.