Transition Timing Function

Class	Properties
ease-linear	transition-timing-function: linear;
ease-in	transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
ease-out	transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
ease-in-out	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

Class

Properties

ease-linear

transition-timing-function: linear;

ease-in

transition-timing-function: cubic-bezier(0.4, 0, 1, 1);

ease-out

transition-timing-function: cubic-bezier(0, 0, 0.2, 1);

ease-in-out

transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

Basic usage

이징 곡선 제어하기

ease-* 유틸리티를 사용해 엘리먼트의 이징 곡선을 제어할 수 있습니다.

각 버튼에 마우스를 올려 예상되는 동작을 확인하세요

ease-in

ease-out

ease-in-out

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

Applying conditionally

호버, 포커스 및 기타 상태

Tailwind는 상태에 따라 유틸리티 클래스를 조건부로 적용할 수 있게 해줍니다. 예를 들어, hover:ease-in 를 사용하면 ease-in 유틸리티를 hover 상태에서만 적용할 수 있습니다.

<div class="transition duration-150 ease-out hover:ease-in">
  <!-- ... -->
</div>

사용 가능한 모든 상태 수정자 목록은 호버, 포커스, & 기타 상태 문서를 참고하세요.

브레이크포인트와 미디어 쿼리

여러분은 반응형 브레이크포인트, 다크 모드, prefers-reduced-motion 등과 같은 미디어 쿼리를 타겟팅하기 위해 변형 수식어를 사용할 수 있습니다. 예를 들어, md:ease-in를 사용하면 중간 화면 크기 이상에서만 ease-in 유틸리티를 적용할 수 있습니다.

<div class="transition duration-150 ease-out md:ease-in">
  <!-- ... -->
</div>

더 자세히 알아보려면 반응형 디자인, 다크 모드, 그리고 다른 미디어 쿼리 수식어에 대한 문서를 확인하세요.

Using custom values

테마 커스터마이징

기본적으로 Tailwind는 4가지 범용 트랜지션 타이밍 함수 유틸리티를 제공합니다. tailwind.config.js 파일에서 theme.transitionTimingFunction 또는 theme.extend.transitionTimingFunction을 수정하여 이 값을 커스터마이징할 수 있습니다.

tailwind.config.js

module.exports = {
  theme: {
    extend: {
      transitionTimingFunction: {
        'in-expo': 'cubic-bezier(0.95, 0.05, 0.795, 0.035)',
        'out-expo': 'cubic-bezier(0.19, 1, 0.22, 1)',
      }
    }
  }
}

기본 테마 커스터마이징에 대해 더 알아보려면 테마 커스터마이징 문서를 참고하세요.

임의 값

테마에 포함시키기 어려운 transition-timing-function 값을 일회성으로 사용해야 한다면, 대괄호를 사용해 임의의 값으로 속성을 즉석에서 생성할 수 있습니다.

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

임의 값 지원에 대해 더 알아보려면 임의 값 문서를 참고하세요.