アンティシペーションイージング — アクション前の巻き戻し

アニメーションにおけるアンティシペーション

アンティシペーションはディズニーの「アニメーションの12の原則」の1つです。大きなアクションの前に、被写体は反対方向に巻き戻ります。UIでもこの原則がインタラクションに個性と読みやすさを加えます。

値

transition-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045);

これはeaseInBackカーブです。負のy1値(-0.28)により、アニメーションが全体の変化量の約28%だけ後方に移動してから前方に加速します。

感触

1. 要素は一時的に最終的な目的地の反対方向に移動します。
2. その後、速度を上げながら前方に加速します。
3. オーバーシュートなしにエンドポイントに到着します。

コード例

.tooltip {
  transform: scale(0);
  transition: transform 400ms cubic-bezier(0.6, -0.28, 0.735, 0.045);
}
.tooltip.show {
  transform: scale(1);
}

ツールチップが表示されると、一瞬scale(0)よりわずかに縮小してからscale(1)に成長します。これにより意図的な表示感を与える「巻き戻し」エフェクトが作られます。

アンティシペーションとオーバーシュートの組み合わせ

最大限の表現力を得るために、アンティシペーション（負のy1）とオーバーシュート（y2 > 1）を組み合わせます：

/* easeInOutBack */
transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);

アンティシペーション使用のガイドライン

• 控えめが良い: UI要素ではy1を-0.1から-0.3の間に保ちます。
• 意図と組み合わせる: ユーザーが開始したアクションにのみ使用します。
• システムフィードバックには避ける: ローディング状態、エラーメッセージ、ステータス更新にはアンティシペーションを使用しないでください。