트랜지션 & 애니메이션
transition-property
CSS 속성 트랜지션을 제어하는 유틸리티.
| Class | Styles |
|---|---|
transition | transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter;
transition-timing-function: var(--default-transition-timing-function); /* cubic-bezier(0.4, 0, 0.2, 1) */
transition-duration: var(--default-transition-duration); /* 150ms */ |
transition-all | transition-property: all;
transition-timing-function: var(--default-transition-timing-function); /* cubic-bezier(0.4, 0, 0.2, 1) */
transition-duration: var(--default-transition-duration); /* 150ms */ |
transition-colors | transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
transition-timing-function: var(--default-transition-timing-function); /* cubic-bezier(0.4, 0, 0.2, 1) */
transition-duration: var(--default-transition-duration); /* 150ms */ |
transition-opacity | transition-property: opacity;
transition-timing-function: var(--default-transition-timing-function); /* cubic-bezier(0.4, 0, 0.2, 1) */
transition-duration: var(--default-transition-duration); /* 150ms */ |
transition-shadow | transition-property: box-shadow;
transition-timing-function: var(--default-transition-timing-function); /* cubic-bezier(0.4, 0, 0.2, 1) */
transition-duration: var(--default-transition-duration); /* 150ms */ |
transition-transform | transition-property: transform, translate, scale, rotate;
transition-timing-function: var(--default-transition-timing-function); /* cubic-bezier(0.4, 0, 0.2, 1) */
transition-duration: var(--default-transition-duration); /* 150ms */ |
transition-none | transition-property: none; |
transition-(<custom-property>) | transition-property: var(<custom-property>);
transition-timing-function: var(--default-transition-timing-function); /* cubic-bezier(0.4, 0, 0.2, 1) */
transition-duration: var(--default-transition-duration); /* 150ms */ |
transition-[<value>] | transition-property: <value>;
transition-timing-function: var(--default-transition-timing-function); /* cubic-bezier(0.4, 0, 0.2, 1) */
transition-duration: var(--default-transition-duration); /* 150ms */ |
예제
기본 예제
transition과 transition-colors 같은 유틸리티를 사용하여 속성이 변경될 때 어떤 속성이 트랜지션 효과를 적용할지 지정할 수 있습니다:
버튼에 마우스를 올려 예상되는 동작을 확인하세요
<button class="bg-blue-500 transition delay-150 duration-300 ease-in-out hover:-translate-y-1 hover:scale-110 hover:bg-indigo-500 ..."> Save Changes</button>모션 감소 지원
사용자가 모션 감소를 선호한다고 설정한 경우, motion-safe와 motion-reduce 변형을 사용하여 애니메이션과 트랜지션을 조건부로 적용할 수 있습니다:
<button class="transform transition hover:-translate-y-1 motion-reduce:transition-none motion-reduce:hover:transform-none ..."> <!-- ... --></button>커스텀 값 사용하기
transition-[<value>] 구문을 사용하세요 transition properties를 완전히 커스텀한 값으로 설정하려면:
<button class="transition-[height] ..."> <!-- ... --></button>CSS 변수를 사용하려면 transition-(<custom-property>) 구문을 사용할 수도 있습니다:
<button class="transition-(--my-properties) ..."> <!-- ... --></button>이는 transition-[var(<custom-property>)] 의 단축 표현으로, 자동으로 var() 함수를 추가해 줍니다.
반응형 디자인
접두사 a transition-property 유틸리티 를 md:와 같은 브레이크포인트 변형과 함께 사용하면 medium 화면 크기 이상에서만 유틸리티가 적용됩니다:
<button class="transition-none md:transition-all ..."> <!-- ... --></button>변형 사용에 대해 더 알아보려면 변형 문서를 참고하세요.
