cards-containers

カードとコンテナーのアニメーション原則

ディズニーの12原則をカードとコンテナーに適用し、魅力的で立体感のあるインターフェースを実現します。

カードに適用する原則

1. スクワッシュ＆ストレッチ

ドラッグ開始時にカードをわずかに縮め、離したときに伸ばします。変化は最小限にとどめ、スケールの変化は最大2～3％にします。

2. アンティシペーション

カードを詳細ビューに展開する前に、短時間（50ms）だけわずかに縮小（0.98）してから展開します。これにより、ユーザーは変化に備えられます。

3. ステージング

操作中のカードは、z-indexとシャドウを使ってほかのカードより前面に浮かせます。背景のカードを暗くするか、ぼかして注意を引きつけます。

4. ストレート・アヘッド＆ポーズ・トゥ・ポーズ

通常時、ホバー時、選択時、展開時の状態を明確に定義します。定義したキーフレーム間をポーズ・トゥ・ポーズで遷移させます。

5. フォロースルー＆オーバーラッピング・アクション

カード内のコンテンツ（テキスト、画像、アイコン）は、カードの動きに少し遅れて動かします。自然な印象になるよう、20～40msずつずらします。

6. イーズイン＆イーズアウト

カードを浮かせる動きにはease-out、カードを元の位置に戻す動きにはease-in-outを使います。リニアは使わないでください。滑らかに浮かせるにはcubic-bezier(0.25, 0.1, 0.25, 1)を使います。

7. アーク

カードを並べ替える（ドラッグ＆ドロップする）際は、直線ではなく曲線を描くように動かします。移動中にわずかに回転させます。

8. セカンダリー・アクション

カードを浮かせる動き（プライマリー）に合わせて、シャドウを広げてぼかします（セカンダリー）。カード内の画像をわずかに拡大したり、枠線を光らせたりすることもできます。

9. タイミング

• ホバー時に浮かせる：200～250ms
• 選択：150ms
• 詳細への展開：300～400ms
• 並べ替え／シャッフル：250～350ms
• カード間のずれ：50～75ms

10. 誇張

ホバー時のシャドウは、通常の深さの2～3倍まで広げられます。選択中のカードは8～12px浮かせられます。カードのサイズに合わせた比率を保ちます。

11. ソリッド・ドローイング

スケールを変更するときも、角丸の比率を一定に保ちます。シャドウは常に同じ光源から生じるようにします。アスペクト比を維持します。

12. アピール

角丸は親しみやすさを感じさせ、控えめなシャドウは上質な印象を加えます。滑らかなトランジションは信頼感を生みます。カードは物理的な物体のように感じられる必要があります。

CSS の実装

.card {
  transition: transform 250ms ease-out,
              box-shadow 250ms ease-out;
}

.card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 12px 40px rgba(0,0,0,0.15);
}

.card-content {
  transition: transform 280ms ease-out; /* slight lag */
}

主なプロパティ

• transform：translateY、scale、rotate
• box-shadow：奥行きと浮き上がり
• z-index：重なり順
• filter：背景のぼかし
• opacity：フォーカス状態