트랜지션 & 애니메이션
transition-delay
CSS 트랜지션의 지연 시간을 제어하는 유틸리티입니다.
| Class | Styles |
|---|---|
delay-<number> | transition-delay: <number>ms; |
delay-(<custom-property>) | transition-delay: var(<custom-property>); |
delay-[<value>] | transition-delay: <value>; |
예제
기본 예제
delay-150과 delay-700 같은 유틸리티를 사용해 엘리먼트의 트랜지션 지연 시간을 밀리초 단위로 설정할 수 있습니다:
각 버튼에 마우스를 올려 예상되는 동작을 확인하세요
delay-150
delay-300
delay-700
<button class="transition delay-150 duration-300 ease-in-out ...">버튼 A</button><button class="transition delay-300 duration-300 ease-in-out ...">버튼 B</button><button class="transition delay-700 duration-300 ease-in-out ...">버튼 C</button>커스텀 값 사용하기
delay-[<value>] 구문을 사용하세요 transition delay를 완전히 커스텀한 값으로 설정하려면:
<button class="delay-[1s,250ms] ..."> <!-- ... --></button>CSS 변수를 사용하려면 delay-(<custom-property>) 구문을 사용할 수도 있습니다:
<button class="delay-(--my-delay) ..."> <!-- ... --></button>이는 delay-[var(<custom-property>)] 의 단축 표현으로, 자동으로 var() 함수를 추가해 줍니다.
반응형 디자인
접두사 a transition-delay 유틸리티 를 md:와 같은 브레이크포인트 변형과 함께 사용하면 medium 화면 크기 이상에서만 유틸리티가 적용됩니다:
<button class="delay-150 md:delay-300 ..."> <!-- ... --></button>변형 사용에 대해 더 알아보려면 변형 문서를 참고하세요.
