CSS: transition

.instui-transition.-transition-fade-entering — Transition 구성요소의 애니메이션 상태 클래스 — .instui-transition 및 상태 클래스 (-transition-fade-entering, -transition-scale-exited 등) — 단독으로 또는 다른 모든 구성요소에 체인하여 사용할 수 있습니다.

Source: transition.css

사용법

@import "@pantoken/components/utilities.css";

예제들

<div class="instui-transition -transition-fade-entering">애니메이션 콘텐츠</div>

수정자

수정자	설명
.-transition-*	런타임에서 토글되는 전환 유형/상태 클래스 (fade|scale|slide-* + entering|entered|exiting|exited).
.-transition-fade-entered	—
.-transition-fade-entering	—
.-transition-fade-exited	—
.-transition-fade-exiting	—
.-transition-scale-entered	—
.-transition-scale-entering	—
.-transition-scale-exited	—
.-transition-scale-exiting	—
.-transition-slide-down-entered	—
.-transition-slide-down-entering	—
.-transition-slide-down-exited	—
.-transition-slide-down-exiting	—
.-transition-slide-left-entered	—
.-transition-slide-left-entering	—
.-transition-slide-left-exited	—
.-transition-slide-left-exiting	—
.-transition-slide-right-entered	—
.-transition-slide-right-entering	—
.-transition-slide-right-exited	—
.-transition-slide-right-exiting	—
.-transition-slide-up-entered	—
.-transition-slide-up-entering	—
.-transition-slide-up-exited	—
.-transition-slide-up-exiting	—

사용자 정의 속성

속성	타입	기본	설명
--duration	<time>	300ms	애니메이션 지속시간(기본값 300ms); 모든 전환 상태의 속도를 빠르게 또는 느리게 하려면 재정의하세요.
--timing	*	ease-in-out	애니메이션 타이밍 함수(기본값 ease-in-out).