コーディング犬に聞く：「アニメーションはCSSとJSどっちで書く？」

まずは「何をきっかけに、どれくらい複雑に動かすか」で考えるのがおすすめです。

単純なホバー、フェード、拡大縮小、色の変化ならCSSが向いています。
見た目の変化として完結しやすく、コードも軽くなりやすいです。

一方で、スクロール量、クリック回数、画面内の状態、
APIの結果などに合わせて細かく制御するならJavaScriptが向いています。

CSSは、状態がはっきりしているアニメーションに向いています。
たとえばボタンにマウスを乗せたとき、メニューを開いたとき、カードを少し浮かせるときです。

transitionやanimationを使えば、短いコードで自然な動きを作れます。

.button {
  transition: transform .2s ease, opacity .2s ease;
}
.button:hover {
  transform: translateY(-2px);
  opacity: .85;
}

制作現場では、装飾としての動きはCSSから考えると整理しやすいです。

JavaScriptは、ユーザーの操作やページの状態に合わせて動きを変えたいときに便利です。

たとえば、スクロールしたら順番に表示する、クリックした要素だけ開く、
スライダーを自動再生する、といった動きです。

CSSだけでもできる場面は増えていますが、
条件分岐が多い動きはJavaScriptのほうが読みやすくなることがあります。

単純に「CSSなら軽い」「JSなら重い」とは言い切れません。

ただし、opacityやtransformを使ったCSSアニメーションは、ブラウザが効率よく処理しやすいです。
逆に、topやleft、widthなどを頻繁に動かすと負荷が高くなる場合があります。

JavaScriptでも、必要なタイミングだけ動かし、無駄な処理を減らせば実務で問題ないことは多いです。
大切なのは、動きの量を増やしすぎないことです。

大阪の店舗サイトや士業サイト、中小企業のコーポレートサイトでは、
派手な演出よりも「内容が読みやすいこと」が優先です。

ボタン、見出し、カード、ナビゲーションなどの小さな動きはCSSで十分なことが多いです。

スクロール演出やスライダーなど、ページ全体の体験に関わるものだけJavaScriptを検討すると、
保守しやすくなります。

アニメーションは、足すより引く意識が大切です。

すべての要素が動くと、ユーザーはどこを見ればよいか分かりにくくなります。
特にスマホでは、動きが多いと読み疲れにつながります。

「クリックできることを伝える」「表示されたことを自然に見せる」など、
目的がある動きだけ残しましょう。