コンテンツにスキップ
Hypermedia Components

モーション

このキットは意図的にほとんど動きません: ハイパーメディアアプリの モーションは状態変化の説明のためにあり、装飾のためではありません。 動くものはひとつの小さなスケールを参照するので、オーバーレイも コントロールもひとつのシステムとして感じられます。

スケール

Section titled “スケール”

デュレーションとイージングはセマンティックトークンです (--hc-motion-* カスタムプロパティとして発行されます):

トークン値用途
--hc-motion-duration-fast120msホバー / 押下のフィードバック、小さな状態反転(レーティングの星)。
--hc-motion-duration-base200msオーバーレイの出入り(ダイアログ、ドロワー、トースト)、パネルの表出、プログレスバーの更新。
--hc-motion-duration-slow320ms長い距離を動く大きなサーフェス(全高シート)。ほぼ不要。
--hc-motion-easing-standardease画面に留まるプロパティ変化(色、その場の translate)。
--hc-motion-easing-entercubic-bezier(0, 0, 0.2, 1)入ってくる要素 — 速く始まり、静かに着地(減速)。
--hc-motion-easing-exitcubic-bezier(0.4, 0, 1, 1)出ていく要素 — 加速して去る(目は退出を追いません)。

ローダーはこのスケールに乗りません: スピナー、スケルトンの シマー、不確定プログレスは独自の長い周期を保ちます — それらは 「まだ動作中」を伝えるもので、状態変化ではないからです。

何がこのスケールを使うか

Section titled “何がこのスケールを使うか”
  • ダイアログはフェード + 着地で出入りします (--hc-dialog-duration、enter/exit イージング、 @starting-style + transition-behavior: allow-discrete)。
  • ドロワーは --hc-drawer-duration + standard イージングで スライドします。
  • トーストのスナップバック / フライアウトは --hc-toast-duration を使います。
  • レーティングとプログレスの遷移は fast / base を参照します。

コンポーネントのデュレーションは個別に上書き可能なままです (--hc-dialog-duration: 150ms;)— 既定はスケールです。

経験則

Section titled “経験則”
  1. 注意を引くためではなく、状態変化を動かす。 入る・出る・移動 する要素は動かしてよい。クリックを誘うための点滅やバウンドは させない。
  2. 1 パターンにつき 1 プロパティセット。 オーバーレイは フェード / 着地、パネルはスライド、フィードバックは色。1 要素に 3 つの効果を重ねない。
  3. 退出は入場より速く感じさせる。 exit イージングを使う — ユーザーはもう去ると決めています。見せ続けない。
  4. prefers-reduced-motion を尊重する。 キットの遷移はすべて この設定下で 0ms になります。アプリ側のモーションも同様に:
@media (prefers-reduced-motion: reduce) {
  .my-panel {
    transition-duration: 0ms;
  }
}
  1. 機能をモーションに依存させない。 htmx のスワップは遷移が 再生されてもされなくても着地しなければなりません — キットの遷移は すべて表示専用であり、アプリの遷移もそうあるべきです。

アプリ CSS でスケールを使う

Section titled “アプリ CSS でスケールを使う”
.my-panel {
  transition:
    opacity var(--hc-motion-duration-base) var(--hc-motion-easing-enter);
}

スケールの上書きは、すべての利用箇所を一度にリタイミングします:

:root {
  --hc-motion-duration-base: 160ms; /* きびきびしたアプリに */
}

関連

Section titled “関連”