mcpField
W
web-motion-design

web-motion-design

github.com/dylantarreデザイン・UI1321.4k 回インストール43 週間前に更新
リポジトリ

web-motion-design について

フロントエンドのデザイナーや開発者向けに、Disney の 12 のアニメーション原則を CSS、JavaScript、フロントエンドフレームワークでの実装に応用するスキルです。操作時の動きや時間設定、パフォーマンスの指針を扱います。

主な機能

  1. 01アニメーション原則の Web への応用
  2. 02CSS と JavaScript の実装パターン
  3. 03操作時の動きの時間設定
  4. 04モーションのパフォーマンス規則

活用シーン

  1. 01ボタンの押下・ホバー動作の設計
  2. 02ドロップダウン展開効果の作成
  3. 03画面アニメーションの性能改善

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/dylantarre/animation-principles --skill web-motion-design

インストール後、Claude Code で/web-motion-designを入力して読み込まれたか確認します。

詳細

Web モーションデザイン

Disneyのアニメーションの12原則をCSS、JavaScript、フロントエンドフレームワークに適用します。

クイックリファレンス

原則Webでの実装
つぶしと伸ばしインタラクション状態での transform: scale()
予備動作動作の前に少し逆方向へ動かす
演出モーションの強弱でユーザーの注意を引きつける
ストレートアヘッド／ポーズ・トゥ・ポーズJSによるフレーム単位のアニメーションとCSSキーフレーム
後追いとオーバーラッピング子要素のアニメーションを段階的にずらす、弾むイージング
スローイン／スローアウトease-in-out、cubic-bezier曲線
アークmotion-path またはベジェ曲線によるtranslate変換
副次的動作メインの動きに応じて変化する影や光彩
タイミング継続時間：マイクロは100～200ms、標準は200～400ms
誇張1.0を超える拡大、オーバーシュートするアニメーション
立体感のある描画一貫したtransform-origin、3Dパースペクティブ
魅力滑らかな60fps、意図のあるモーションデザイン

原則の適用

つぶしと伸ばし：ボタンを押したときに scaleY で圧縮し、ホバー時に scaleX で伸ばします。体積は一定に保ちます。Y方向に圧縮する場合は、X方向を少し広げます。

予備動作：ドロップダウンを展開する前に、まず2～3％縮小します。コンテンツを左にスライドさせる前に、5px右へ動かします。

演出：モーダルにフォーカスしている間は、背景要素を暗くします。視線の流れを誘導するためにモーションを使い、重要な要素から先にアニメーションさせます。

ストレートアヘッドとポーズ・トゥ・ポーズ：予測しやすく、繰り返し可能なアニメーションにはCSSの @keyframes（ポーズ・トゥ・ポーズ）を使います。動的で物理ベースのモーションにはJavaScript／GSAP（ストレートアヘッド）を使います。

後追いとオーバーラッピング：親要素が停止した後も、子要素の動きが続くようにします。自然な段階的ずれを作るには、値を少しずつ小さくしながら animation-delay を使います。

スローイン／スローアウト：UIのモーションに linear は決して使いません。標準のイージング：cubic-bezier(0.4, 0, 0.2, 1)。表示：cubic-bezier(0, 0, 0.2, 1)。終了：cubic-bezier(0.4, 0, 1, 1)。

アーク：自然界の要素は直線ではなく、弧を描いて動きます。offset-path を使うか、異なるイージングでX／Y方向のtransformを組み合わせます。

副次的動作：ホバー時にボタンの影を大きくし、ぼかします。ボタンが拡大する間、ボタン内のアイコンを回転させます。背景のパーティクルをメイン要素に反応させます。

タイミング：マイクロインタラクション：100～200ms。標準的なトランジション：200～400ms。複雑なシーケンス：400～700ms。ページ遷移：300～500ms。

誇張：ホバー状態では1.01ではなく、1.05～1.1に拡大します。エラー時の振動は2pxではなく、10～20px動かします。モーションは目立つようにしつつ、唐突にならないようにします。

立体感のある描画：transform-origin を一貫して維持します。3Dの奥行きには perspective を使います。視覚的な不具合を引き起こす、競合するtransformは避けます。

魅力：60fpsを目標にし、可能な限り transform と opacity のみを使います。カスタムイージング曲線でさりげなく個性を加えます。モーションには意図を感じられるようにします。

コードパターン

/* Elastic button with squash/stretch */
.button:active {
  transform: scale(0.95, 1.05);
  transition: transform 100ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Anticipation before expansion */
.dropdown-enter {
  animation: dropdown-open 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes dropdown-open {
  0% { transform: scaleY(0.98); opacity: 0; }
  100% { transform: scaleY(1); opacity: 1; }
}

パフォーマンスのルール

  1. GPUアクセラレーションのため、アニメーションには transform と opacity のみを使います
  2. will-change は控えめに使い、アニメーション後に削除します
  3. アニメーションが予測可能な場合は、JavaScriptよりCSSを優先します
  4. 低スペックのデバイスでテストします

コメント

Markdown 対応