ReactでのCSSキーフレームアニメーション

@keyframes ルールでは、タイムライン上の各時点におけるプロパティ値を指定して、多段階のアニメーションを定義します。from/to や、0%、50%、100% のようなパーセンテージを使用します。

transition とは異なり、keyframes では、各段階で state を変更しなくても自動的に実行される複雑な多段階の動きを定義できます。

animation プロパティを使って keyframe セットを適用します: animation: slideIn 400ms ease forwards。名前、継続時間、タイミング関数、fill mode をまとめて指定できます。

forwards の fill mode を指定すると、アニメーション終了後も要素が最後の keyframe の値を保持するため、開始時の状態に戻ることを防げます。

React では通常、state が true になったときに animation の宣言を持つクラスを追加します。たとえば is-entering を追加すると、要素がマウントされた瞬間やフラグが切り替わった瞬間に keyframes が開始します。

これにより、アニメーションのロジックは CSS に置いたまま、React はクラスを付けるタイミングだけを決められます。

animation-fill-mode は、アニメーションの実行前と実行後にどのスタイルを適用するかを制御します。forwards は最後の keyframe を保持し、backwards は遅延中に最初の keyframe を適用し、both はその両方を行います。

forwards がない場合、フェードインする状態までアニメーションした要素は、アニメーション完了時に透明な状態へ戻ってしまいます。

animation-direction: alternate は、各イテレーションでアニメーションを順方向に再生してから逆方向に再生します。animation-iteration-count: infinite と組み合わせると、脈動や呼吸のような滑らかな往復運動を作れます。

ローディングインジケーターや、さりげなく注意を引く動きに便利です。

animation-play-state には running または paused を指定できます。React の state から制御できるため、たとえばクラスを切り替えて、ホバー時にマーキーを一時停止できます。

リセットするのではなく一時停止するため、アニメーションは停止した位置から正確に再開されます。

キーフレームアニメーションは、クラスが最初に適用されたときに一度だけ再生されます。同じクラスを再度追加しても再開されません。React での最もすっきりした方法は、要素の key を変更して React に新しいノードを再マウントさせ、アニメーションを最初から再生することです。

たとえばトーストに key={count} を指定すると、count が増えるたびに再マウントされます。

快適さやアクセシビリティのために、OS でモーションの軽減を有効にしているユーザーもいます。重要ではないアニメーションは @media (prefers-reduced-motion: reduce) で囲み、その中で無効にするか短縮してください。

この設定に対応すると、より多くの人が使いやすいインターフェースになり、不快感を引き起こすことも避けられます。

要素がビューポートに入ったときにアニメーションさせるには、useEffect 内で IntersectionObserver を使用します。エントリーが表示されると state を設定し、それによってアニメーション用のクラスを追加します。

これにより、毎フレーム実行される負荷の高いスクロールリスナーを使わずに、スクロールに応じて要素が表示される効果を実現できます。

animation-delay は、各キーフレームアニメーションが開始するタイミングをずらします。項目のリストに少しずつ増加する遅延を設定すると、演出された表示のように順番にアニメーションさせられます。

React では、style={{ animationDelay: i * 80 + 'ms' }} を使って項目ごとの遅延を計算できます。

インタラクションによって発生する単純な 2 状態間の変化にはトランジションを使い、複数段階の動き、ループ、または state の切り替えとは独立して実行されるアニメーションが必要な場合にはキーフレームを使います。

どちらも純粋な CSS なので、React はクラスをいつ付けるかを決めるだけで、フレームの処理はブラウザーが行います。

キーフレームの動作についての理解度を確認しましょう。

@keyframes の定義方法、animation のショートハンドによる適用方法、フィルモードと方向の制御方法、アニメーションの一時停止と再トリガーの方法、そして IntersectionObserver を使ってスクロール時に要素を表示する方法を学びました。

また、アクセシブルなモーションのために prefers-reduced-motion に対応する方法も確認しました。