ボタンのホバー、モーダルの表示、要素のスクロール連動——UIに動きを付けると、操作の手応えが伝わりやすくなり、状態の変化も理解しやすくなります。一方で、動きが遅すぎたり、カクついたり、意味もなく派手だったりすると、かえって使いにくい印象を与えます。CSSアニメーションは書くこと自体は難しくありませんが、「気持ちよく感じる動き」に仕上げるには、いくつか押さえるべきポイントがあります。この記事では、CSSアニメーションを設計する手順を、動きの選択からイージング調整、keyframesの組み立て、パフォーマンス確認まで順番に紹介します。
1. 何をどう動かすかを決める
まず、動かす対象と種類を決めます。CSSで動かせるプロパティは多数ありますが、実際のUIでよく使うのは、位置（移動）・大きさ（拡大縮小）・回転・透明度の4つです。これらは transform と opacity の組み合わせでほぼ表現できます。CSS Transform Explorer で translate・scale・rotate・skew の値を変えながら結果を確認すると、それぞれの変形がどう効くか、複数を組み合わせたときにどうなるかが直感的に分かります。注意点として、transform は指定の順番によって結果が変わります。回転してから移動するのと、移動してから回転するのでは着地点が異なるため、意図した動きにならないときは順番を疑ってみてください。まずはここで「どの変形をどれだけ加えるか」を固めます。
この手順で使うツール
CSS Transform Explorer
translate / rotate / scale / skew を 2D/3D スライダーで即調整
2. イージングで動きの質感を決める
動きの印象を最も左右するのが、イージング（時間に対する変化の割合）です。同じ距離を同じ時間で動かしても、一定速度（linear）なら機械的に、最初速く最後ゆっくり（ease-out）なら自然に感じられます。実務では、画面に入ってくる動きには ease-out、出ていく動きには ease-in、その場で変化する動きには ease-in-out を使うのが基本です。Bezier Curve Editor では、cubic-bezier() の制御点をドラッグして曲線を作り、実際にボールが動く様子で確認できます。終点を少し行き過ぎてから戻る曲線にすると、弾むような表情が生まれます。所要時間の目安は、小さなUIの変化で150〜250ミリ秒、モーダルなど大きな要素で250〜400ミリ秒程度です。500ミリ秒を超えると、多くの場合「待たされている」と感じられます。
この手順で使うツール
Bezier Curve Editor
cubic-bezier() をビジュアル操作で作成
3. keyframes を組み立てる
単純な状態変化なら transition で十分ですが、複数の段階を経る動きや、繰り返す動きには @keyframes を使います。CSS Animation Builder では、duration・delay・timing-function・iteration-count・direction・fill-mode をGUIで調整しながら、0%・100%（中間フレームも追加可能）の各時点で translate・rotate・scale・opacity・背景色を設定できます。プレビューが即座に反映されるので、数値を書き換えてはブラウザを再読み込みする手間がありません。ここで見落とされがちなのが fill-mode です。アニメーション終了後に元の状態へ戻ってしまう場合は、forwards を指定すると最終フレームの状態を保持できます。また、繰り返す動きでは direction: alternate を使うと、往復する自然なループになります。
この手順で使うツール
CSS Animation Builder
keyframesをスライダーで組み立て・リアルタイムプレビュー
4. パフォーマンスに配慮する
動きがカクつく原因の多くは、動かしているプロパティの選択にあります。width・height・top・left・margin などを変化させると、ブラウザはレイアウトの再計算（リフロー）を毎フレーム行うため、負荷が高くなります。一方 transform と opacity は、レイアウトを変えずに合成だけで処理できるため、滑らかに動かせます。「移動は left ではなく translate、サイズ変更は width ではなく scale、表示切替は display ではなく opacity」と覚えておくと、大きく外しません。要素が多い場合や複雑な動きでは、will-change を指定して事前に準備させる方法もありますが、多用するとメモリを消費するため、本当に必要な要素だけに限定します。実装後は開発者ツールでフレームレートを確認し、60fpsを維持できているかを見ておくと安心です。
5. 動きを控えるべき場面に対応する
最後に忘れてはいけないのがアクセシビリティです。前庭障害などを持つ人にとって、大きな動きや視差効果は、めまいや吐き気を引き起こすことがあります。OSには「視差効果を減らす」という設定があり、CSSからは prefers-reduced-motion メディアクエリで検知できます。この設定が有効な場合は、アニメーションを無効化するか、位置の移動をやめて透明度の変化だけに置き換える、といった配慮をします。実装は数行で済みますが、必要な人にとっては大きな違いになります。あわせて、点滅する動きは避けること、自動再生されるループアニメーションは停止手段を用意することも意識しておくとよいでしょう。動きは「あると良いもの」であって、なくても情報が伝わる設計が基本です。
まとめ
CSSアニメーションの設計は「何を動かすか決める → イージングで質感を作る → keyframesで組み立てる → transform/opacityで軽くする → 動きを控える設定に対応する」という流れで進めると、気持ちよく動いて負荷も低いUIになります。特に「移動はleftでなくtranslate」「所要時間は長くても400ミリ秒程度」「prefers-reduced-motionへの対応」の3点は、そのまま実装の指針として使えます。