transition-delay
트랜지션이 시작되기 전의 대기 시간을 설정합니다. 일반적으로 축약형 tall에 타이밍을 포함하여 사용하며, 개별 제어가 필요할 때 사용합니다.
클래스 목록
| <tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스 | CSS | 설명 |
|---|---|---|
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 |
사용 예시
축약형 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>팁 & 주의사항
축약형에 딜레이 포함 가능
대부분의 경우 tall200msease 같은 축약형으로 충분합니다. transition-delay를 별도로 지정하는 경우는 다른 속성과 다른 딜레이가 필요할 때입니다.
연쇄 애니메이션에 활용
여러 요소에 서로 다른 딜레이를 주면 순차적으로 나타나는 연쇄 애니메이션(staggered animation) 효과를 만들 수 있습니다.