プロジェクトに適したイージング（イーズイン、イーズアウト、またはその両方）を選択します。バウンスを使ってさらに楽しくするのもおすすめです。
ここまで、アニメーションのイージングに利用できるさまざまなオプションについて説明しました。では、プロジェクトではどのような種類を使用し、アニメーションにはどのような持続時間を設定すべきでしょうか。
まとめ
- UI 要素にはイーズアウト アニメーションを使用します。Quintic のイーズアウトは非常に便利ですが、速く簡単になります。
- アニメーションの長さを必ず使用してください。イーズアウトとイーズインは 200 ～ 500 ミリ秒、バウンスと弾力性のイーズは 800 ～ 1, 200 ミリ秒のより長い期間にする必要があります。
一般的には ease-out が適切であり、適切なデフォルトであることも間違いありません。すばやく起動し、アニメーションに反応が良い感じがします。これは望ましい動作ですが、最後は速度が遅くなります。
イーズアウトには、CSS の ease-out キーワードで指定されるもの以外にも、よく知られているいくつかの数式があります。これらは「積極性」に及びます。すばやくイーズアウト効果を得るには、Quintic Ease-out の使用を検討してください。
他のイージング方程式、特にバウンスや弾性イージングは、プロジェクトに適した場合にのみ、慎重に使用してください。不快なアニメーションなど、ユーザーをエクスペリエンスから外す要素がいくつかあります。プロジェクトが楽しいことを意図していないのであれば、UI の周りで要素が動き回らないようにします。逆に、気軽に楽しめるサイトを作成している場合は、ぜひバウンスを使用してください。
ご自身のプロジェクトの個性に合ったものを選んでから、徐々に適用していきましょう。イージング タイプの完全なリストとデモについては、easings.net をご覧ください。
アニメーションの適切な長さを選択する
プロジェクトに追加するアニメーションは、適切な長さにすることが重要です。短すぎるとアニメーションが攻撃的かつシャープに感じられ、長すぎると邪魔になり、煩わしくなります。
- イーズアウト: 200 ～ 500 ミリ秒。これにより、目がアニメーションを目にするようになりますが、邪魔に感じません。
- イーズイン: 200 ～ 500 ミリ秒。最後に振動するので、タイミングを変更してもその影響が緩和されないことに注意してください。
- バウンス効果または弾性効果: 800 ～ 1,200 ミリ秒。Elastic や bounce 効果が「落ち着く」まで待つ必要があります。この時間がないと、弾力性のある弾力がある部分が攻撃的になり、目を不快に感じてしまいます。
もちろん、これらはガイドラインにすぎません。ご自身で簡単に試して、プロジェクトに適したものを選択してください。