medium-300-500ms

中程度のアニメーション（300-500ms）

300-500msの範囲は、標準的なアニメーションの領域です。じっくり見られる長さでありながら、操作の流れを妨げません。意味のある動きを表現する際の定番の長さです。

中程度の長さでのディズニーの原則

12の原則すべてを適用可能

スクワッシュ＆ストレッチ：表現を十分に行います。バウンドする要素や弾力のある要素には、目に見える変形を加えます。15-25%の伸縮が自然に感じられます。

予備動作：明確な準備を行います。主な動作の前に80-120msの予備動作を入れます。前へ押し出す前に、いったん引きます。

演出：複数の要素を振り付けられます。主な動作を先行させ、補助的な要素を続かせます。

ストレート・アヘッド／ポーズ・トゥ・ポーズ：ポーズ・トゥ・ポーズを推奨します。キーとなる位置を定義し、中間の動きはイージングに任せます。

フォロースルー：不可欠です。各部分が異なる速度で落ち着く、重なり合う動きを取り入れます。

スローイン／スローアウト：自然さを出すうえで重要です。どちらの方向にも適切なイージングが必要です。

弧を描く動き：自然な動きの軌道を使います。要素は実際の物理法則に合った曲線に沿って移動させます。

副次動作：複数の副次動作を加えます。頭の動きに髪を追従させ、物体の動きに影を追従させます。

タイミング：60fpsで18-30フレームです。繊細な動きを表現できるだけのフレーム数があります。

誇張：幅広く活用できます。ブランドの個性や文脈に合わせます。

立体感のある描画：複雑な変形が可能です。3D回転や遠近感の変化を活用できます。

訴求力：キャラクターの個性を定義するアニメーションです。ブランドの個性が表れるのはこの領域です。

イージングの推奨事項

/* Smooth, natural motion */
transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);

/* Expressive entrance */
transition: all 450ms cubic-bezier(0.16, 1, 0.3, 1);

/* Bouncy, playful */
transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);

/* Dramatic deceleration */
transition: all 350ms cubic-bezier(0, 0.55, 0.45, 1);

最適な使用例

• ページ／ビューの切り替え
• 複雑なモーダルシーケンス
• アニメーション付きイラスト
• データビジュアライゼーションの変化
• オンボーディングアニメーション
• 機能の紹介
• ステートマシンの遷移
• 読み込み完了時の演出

実装パターン

.page-enter {
  opacity: 0;
  transform: translateX(30px);
}

.page-enter-active {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 350ms ease-out,
              transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Staggered children */
.list-item {
  transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
.list-item:nth-child(1) { transition-delay: 0ms; }
.list-item:nth-child(2) { transition-delay: 50ms; }
.list-item:nth-child(3) { transition-delay: 100ms; }

重要なポイント

中程度の長さのアニメーションによって、アニメーションはストーリーテリングになります。ユーザーはこれらのアニメーションを見て、理解し、記憶します。ここでは仕上がりに力を入れましょう。仕上がりが、ユーザーが感じる品質を左右します。