CSSアニメーションをコピペする前の注意｜重さ・スマホ・酔い対策

結論: 貼ったアニメーションは、公開前に3か所を見ればほとんど片づきます。

• 重い・カクつくなら → 動かすのを transform と opacity だけにする
• スマホで崩れるなら → はみ出し・ホバー・100vh の3か所を見る
• 何も困っていなくても → prefers-reduced-motion のブロックを1つ足す（動きで酔う人への配慮）

納品前日のLPに、ネットで拾ったフェードインを貼る。PCでは滑らか。ところがスマホで開くと、画面が横にずるっと動く。

ここ、本当によく起きます。

コピペ素材の紹介記事は多いのに、貼ったあとの話はあまり見かけません。そこで、MDN・web.dev・W3Cの公式資料から点検ポイントを拾ってまとめました。

この記事の目次

1. 貼ったCSSアニメーションが重い・カクつくのはなぜ？
2. スマホで横にはみ出す・ホバーが効かないときはどこを直す？
3. prefers-reduced-motionはどこに何行足せばいい？
4. 「動きを減らす」設定は自分の端末でどう確かめる？
5. LPに広告っぽい動きを入れるなら「5秒」と「1秒に3回」に注意
6. AIにCSSアニメーションを書き直してもらうときの指示文は？
7. よくある質問
8. この記事のまとめ

貼ったCSSアニメーションが重い・カクつくのはなぜ？

原因はたいてい「何を動かしているか」。CSSだけで書いてあっても、軽いとは限りません。

web.devは、動かすものを opacity と transform に絞るよう勧めています。この2つは、ブラウザが「重ね合わせ」の工程だけで処理できるからです。

幅・位置・影を動かすと話が変わります。毎フレーム、配置の計算と描き直しが走ります。

← 表は横にスクロールできます →

transform は周りの要素を押しのけません。なので、表示のずれの指標（CLS）も悪化しにくい。web.devの目標値は0.1未満です。

will-change は「付ければ速くなる」ものではありません。MDNは「既存の性能問題を扱うための最終解決手段」としていて、付けすぎると逆に重くなります。

個人的には、コピペ素材に最初から will-change が書いてあったら、いったん消して様子を見るのが手堅いと思います。

スマホで横にはみ出す・ホバーが効かないときはどこを直す？

スマホの崩れは、ほぼ次の3つのどれかです。

← 表は横にスクロールできます →

/* 1. スライドインのはみ出し対策（セクション単位で） */
.section { overflow-x: clip; }

/* 2. ホバーはホバーできる端末だけ */
@media (hover: hover) {
  .btn:hover { transform: translateY(-2px); }
}

/* 3. 全画面のファーストビュー */
.hero {
  height: 100vh;  /* 古いブラウザ向け */
  height: 100svh; /* アドレスバーが出ていても収まる */
}

• hidden でなく clip にする理由：clip はスクロールコンテナー（中だけスクロールできる箱）になりません
• clip の落とし穴：切り取った部分にボタンや入力欄があると、キーボードで届かなくなります
• dvh と svh の違い：dvh は画面の変化にぴったり合いますが、スクロール中にサイズが変わります。ファーストビューなら svh のほうが落ち着いて見えます

prefers-reduced-motionはどこに何行足せばいい？

貼った素材のすぐ下に @media (prefers-reduced-motion: reduce) を1つ足し、animation と transition の両方を止めます。

prefers-reduced-motion は、OSの「動きを減らす」設定をCSSから読み取る仕組みです。MDNによると、2020年1月からすべての主要ブラウザで使えます。

内耳が敏感な人は、大きな拡大縮小や視差スクロールで、めまいや吐き気が出ることがあります。そのための設定です。

あなたの状況に合わせて、次の3段階から選んでください。

← 表は横にスクロールできます →

段階1：止める（いちばん少ない追加）

@media (prefers-reduced-motion: reduce) {
  .fade-in,
  .slide-in {
    animation: none;
    transition: none;
    opacity: 1;      /* ← これを忘れると消えたままになる */
    transform: none;
  }
}

ここが一番の落とし穴です。フェードイン素材の多くは、最初が opacity: 0 になっています。

animation: none だけだと、要素が透明なまま表示されません。最後の状態（opacity: 1）も必ずセットで書きます。

段階2：動かないのを基本にする

.slide-in { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  .slide-in { animation: slideIn .6s ease-out both; }
}

web.devも紹介している書き方で、「動いてもいいと分かった人にだけ動きを付ける」形です。新しく組むなら、個人的にはこちらを勧めます。止め忘れが起きない作りだからです。

段階3：JSやGIFで動かしている場合

const mq = window.matchMedia('(prefers-reduced-motion: reduce)');
if (!mq.matches) { /* ここでだけアニメーションを開始 */ }
mq.addEventListener('change', () => { /* 設定が変わったら止める・再開する */ });

• JS：CSSのメディアクエリでは止まりません。上のように判定します
• GIF：<picture> の <source media="(prefers-reduced-motion: no-preference)"> に動く版、<img> に静止画を入れると切り替わります

MDNの例は「止める」ではなく「置き換える」形です。拡大縮小を、透明度だけの変化に差し替えています。上書き用のルールは、元のルールより後ろに書いてください。

ライブラリには、最初から対応しているものもあります。Animate.cssは公式サイトで prefers-reduced-motion 対応済みだと明記しています。

同じ公式サイトには、ベストプラクティスとして次の3点が載っています。ライブラリを使わない人も、そのまま点検項目にできます。

• 大きな要素を動かさない
• <html> や <body> を動かさない
• 無限に繰り返すアニメーションを避ける

「動きを減らす」設定は自分の端末でどう確かめる？

一番手軽なのはChromeの開発者ツール。OSの設定を変えずに、ブラウザの中だけで切り替えられます。

← 表は横にスクロールできます →

地味に便利なのが、同じレンダリングタブの「ペイントの点滅」。描き直しが起きた範囲が光るので、最初の章の「重い動き」もここで見つかります。

LPに広告っぽい動きを入れるなら「5秒」と「1秒に3回」に注意

流れ続ける演出と点滅するボタンは、アクセシビリティの国際基準（WCAG）でいちばん基本のレベルに当たります。

← 表は横にスクロールできます →

prefers-reduced-motion 対応は、W3Cが2.3.3（いちばん上のAAA）の手段として挙げているものです。「やらないと違反」という種類の話ではありません。

気をつけたいのは、むしろレベルAの2つです。流れ続けるロゴのマーキーや、ピカピカ光るCTAボタンが当たりやすい。広告のノリをLPに持ち込むなら、ここだけは先に見ておくと安心です。

AIにCSSアニメーションを書き直してもらうときの指示文は？

3つの条件をまとめて渡すのが早いです。下の文をそのまま使えます。

次のCSSアニメーションを書き直してください。
1. 動かすプロパティは transform と opacity だけにする
2. スマホで横にはみ出さないよう、親要素に overflow-x: clip を付ける。
   :hover の演出は @media (hover: hover) で囲む
3. @media (prefers-reduced-motion: reduce) を追加し、animation と transition を止める。
   止めたときは最後の状態（opacity: 1 など）で表示されるようにする
変更した理由を1行ずつ添えてください。

送るときは、この指示文のすぐ下に、書き直したいCSSをそのまま続けて貼ります。

3つ目の「最後の状態で表示」は、書かないとAIも抜かしがちです。出てきたコードは、前の章の表の環境で一度切り替えて確かめてから使ってください。

よくある質問

Q. コピペしたのに、自分の端末だけ動きません。 最初に見るのは2点です。@keyframes の名前と animation-name が一致しているか。HTMLにクラスが付いているか。それでも動かないなら、OSの「動きを減らす」がオンかもしれません。Animate.cssのように、ライブラリ側で止めている場合があります。

Q. 全部のアニメーションを止めないといけませんか？ 基本は「止める」より「置き換える」です。MDNの例も、拡大縮小を透明度の変化に差し替えています。優先して抑えたいのは、大きな拡大縮小・画面を横切る移動・視差スクロールの3つです。

Q. コピペ素材やライブラリを、クライアント案件で使ってもいいですか？ 配布元ごとにライセンスが違います。たとえばAnimate.cssはHippocratic License（2026-10-11時点のフッター表記はHippocratic-2.1）です。案件に入れる前に、配布元の条文に一度目を通しておくと安心です。

この記事のまとめ

• 動かすのは transform と opacity だけ。will-change は問題が出てから
• スマホは「横のはみ出し」「ホバー」「100vh」の3か所を見る
• prefers-reduced-motion: reduce で animation と transition を止め、最後の状態も書き足す
• 自動で5秒を超えて続く動きと、1秒に3回を超える点滅は、LPに入れる前に見直す

今日やることは1つだけ。 Chromeの開発者ツールで prefers-reduced-motion:reduce に切り替えて、自分のLPを上から下までスクロールしてみてください。消えたままの要素があれば、そこが最初に直す場所です。

この記事は、Webサイトの動く部品集 AETHER Motion の制作チームが書いています。