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）。