트랜지션 이징 함수

트랜지션 이징 함수 (Transition Timing Function)

트랜지션(transition)의 진행 속도 곡선(이징)을 정해주는 유틸리티예요. 가속, 감속, 혹은 선형 등 움직임의 느낌을 조절할 수 있어요.

출처: 문서

본문

클래스 & 스타일 (Class Styles)

ease-linear transition-timing-function: linear;

ease-in transition-timing-function: var(--ease-in); /* cubic-bezier(0.4, 0, 1, 1) */

ease-out transition-timing-function: var(--ease-out); /* cubic-bezier(0, 0, 0.2, 1) */

ease-in-out transition-timing-function: var(--ease-in-out); /* cubic-bezier(0.4, 0, 0.2, 1) */

ease-initial transition-timing-function: initial;

ease-(<custom-property>) transition-timing-function: var(<custom-property>);

ease-[<value>] transition-timing-function: <value>;

예시 (Examples)

기본 예제 (Basic example)

ease-in, ease-out 같은 유틸리티를 사용하면 요소의 트랜지션 이징 곡선을 제어할 수 있어요.

<button class="duration-300 ease-in ...">Button A</button><button class="duration-300 ease-out ...">Button B</button><button class="duration-300 ease-in-out ...">Button C</button>

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

ease-[<value>] 문법을 사용하면 완전히 커스텀한 값으로 트랜지션 이징 함수를 설정할 수 있어요.

<button class="ease-[cubic-bezier(0.95,0.05,0.795,0.035)] ...">
  <!-- ... -->
</button>

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

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

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

반응형 디자인 (Responsive design)

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

<button class="ease-out md:ease-in ...">
  <!-- ... -->
</button>

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

테마 커스터마이징 (Customizing your theme)

--ease-* 테마 변수를 사용하면 프로젝트의 트랜지션 이징 함수 유틸리티를 커스터마이즈할 수 있어요.

@theme {
  --ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
}

이제 마크업에서 ease-in-expo 유틸리티를 사용할 수 있어요.

<button class="ease-in-expo">
  <!-- ... -->
</button>

테마 커스터마이징에 대해 더 자세히 알고 싶다면 theme 문서를 확인해 보세요.

트랜지션 이징 함수