実践的なアニメーションのコツ

よくあるアニメーション実装シナリオの詳細なリファレンスガイドです。アニメーションを実装する際のチェックリストとしてご活用ください。

記録とデバッグ

アニメーションを記録する

何か違和感があるのに原因が特定できない場合は、アニメーションを記録してフレーム単位で再生してください。通常速度では見えない詳細が明らかになります。

ぐらつくアニメーションを修正する

CSS の transform アニメーションの開始・終了時に、GPU/CPU レンダリングのハンドオフにより要素が 1px ずれることがあります。

修正方法:

.element {
  will-change: transform;
}

これにより、アニメーション全体を通じて要素を GPU 上に保つようブラウザに指示します。

一度休憩する

アニメーションをコーディングして配置するのを一度に行わないでください。一度離れて、気分を新たに返ってきてください。最高のアニメーションは数時間ではなく数日かけてレビューと改善を重ねています。

ボタンとクリックフィードバック

押下時にボタンをスケーリングする

微妙なスケールフィードバックを追加して、インターフェースの応答性を高めます:

button

...