AAtomic CSS

transition-delay

트랜지션이 시작되기 전의 대기 시간을 설정합니다. 일반적으로 축약형 tall에 타이밍을 포함하여 사용하며, 개별 제어가 필요할 때 사용합니다.

클래스 목록

클래스CSS설명
tditransition-delay: inherit부모의 transition-delay 값을 상속
tdinitransition-delay: initial초기값(0s)으로 리셋
tdrtransition-delay: revert사용자 에이전트 기본값으로 되돌림
tdrltransition-delay: revert-layer이전 캐스케이드 레이어의 값으로 되돌림
tduntransition-delay: unset상속 가능하면 inherit, 아니면 initial

사용 예시

축약형 transition 클래스와 함께 사용하여 딜레이를 별도로 제어할 수 있습니다.

<!-- 딜레이 상속 -->
<div class="tall200msease">
  <span class="tdi hover-cFFFFFF">부모의 딜레이를 상속</span>
</div>

<!-- 딜레이 리셋 -->
<div class="tall300msease">
  <button class="tdini hover-bg6366F1">딜레이 없이 즉시 전환</button>
</div>

팁 & 주의사항

축약형에 딜레이 포함 가능

대부분의 경우 tall200msease 같은 축약형으로 충분합니다. transition-delay를 별도로 지정하는 경우는 다른 속성과 다른 딜레이가 필요할 때입니다.

연쇄 애니메이션에 활용

여러 요소에 서로 다른 딜레이를 주면 순차적으로 나타나는 연쇄 애니메이션(staggered animation) 효과를 만들 수 있습니다.

transitiontransition-propertytransition-timing-function