트랜지션 속성

트랜지션 속성 (Transition Property)

어떤 속성이 바뀔 때 트랜지션(transition)을 적용할지, 어떤 속성을 전환할지 정해주는 유틸리티예요. 색상만, 투명도만, 변환(transform)만 등 원하는 속성을 골라 전환할 수 있어요.

출처: 문서

본문

클래스 & 스타일 (Class Styles)

transition transition-property: color, background-color, border-color, outline-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, display, content-visibility, overlay, pointer-events; 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, outline-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 */

예시 (Examples)

기본 예제 (Basic example)

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>

동작 줄이기 지원 (Supporting reduced motion)

사용자가 동작(모션)을 줄이는 것을 선호한다고 지정한 상황이라면, motion-safe와 motion-reduce 변형을 사용해 애니메이션과 트랜지션을 조건부로 적용할 수 있어요.

<button class="transform transition hover:-translate-y-1 motion-reduce:transition-none motion-reduce:hover:transform-none ...">
  <!-- ... -->
</button>

커스텀 값 사용하기 (Using a custom value)

transition-[<value>] 문법을 사용하면 완전히 커스텀한 값으로 전환 속성을 설정할 수 있어요.

<button class="transition-[height] ...">
  <!-- ... -->
</button>

CSS 변수를 쓸 때는 transition-(<custom-property>) 문법을 사용할 수도 있어요.

<button class="transition-(--my-properties) ...">
  <!-- ... -->
</button>

이것은 transition-[var(<custom-property>)]의 줄임 표현이에요. var() 함수를 자동으로 추가해 주기 때문에 훨씬 편리하죠.

반응형 디자인 (Responsive design)

transition-property 유틸리티 앞에 md: 같은 브레이크포인트 변형을 붙이면 중간 크기 화면 이상에서만 유틸리티가 적용되게 만들 수 있어요.

<button class="transition-none md:transition-all ...">
  <!-- ... -->
</button>

변형(variant) 사용법에 대해 더 알아보려면 variants 문서를 확인해 보세요.

트랜지션 속성