트랜지션 & 애니메이션
transition-timing-function
CSS 트랜지션의 이징(easing)을 제어하는 유틸리티입니다.
| 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>; |
예제
기본 예제
ease-in과 ease-out 같은 유틸리티를 사용해 엘리먼트의 트랜지션 이징 곡선을 제어할 수 있습니다:
각 버튼에 마우스를 올려 예상되는 동작을 확인하세요
ease-in
ease-out
ease-in-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>커스텀 값 사용하기
ease-[<value>] 구문을 사용하세요 transition timing function를 완전히 커스텀한 값으로 설정하려면:
<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() 함수를 추가해 줍니다.
반응형 디자인
접두사 a transition-timing-function 유틸리티 를 md:와 같은 브레이크포인트 변형과 함께 사용하면 medium 화면 크기 이상에서만 유틸리티가 적용됩니다:
<button class="ease-out md:ease-in ..."> <!-- ... --></button>변형 사용에 대해 더 알아보려면 변형 문서를 참고하세요.
테마 커스터마이징
--ease-* 테마 변수를 사용해 프로젝트에서 transition timing function 유틸리티를 커스터마이징할 수 있습니다:
@theme { --ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035); }이제 ease-in-expo 유틸리티를 마크업에서 사용할 수 있습니다:
<button class="ease-in-expo"> <!-- ... --></button>테마 커스터마이징에 대해 더 알아보려면 테마 문서를 참고하세요.
