transitionには変化の前後の状態が要る
transitionは、あるプロパティの値が変わったときに、その変化を時間をかけて補間する仕組みです。つまり「変化前の値」と「変化後の値」の両方が必要です。最初から最終状態だけが指定されていると、変わるものがないのでアニメーションは起きません。
よくある失敗は、要素を追加した直後に最終状態のクラスを当てるケースです。ブラウザが初期状態を一度も描画しないまま最終状態になると、補間されず一瞬で表示されます。初期状態を一度反映させてから次のフレームで最終状態へ変える、という順序が必要になります。
animationはキーフレームと実行条件を確認
animationを使う場合、@keyframesの定義名とanimation-nameが一致しているかをまず確認します。名前の打ち間違いや、keyframesの未定義があると何も起きません。animation-durationが指定されていない（0sのまま）と、一瞬で終わって動いて見えないこともあります。
display:noneの要素にはアニメーションは効きません。表示してから動かす必要があります。また、要素がアニメーションを始めた時点でDOMに存在し、対象クラスが適用されているかも確認点です。再生されない場合は、要素を検証して実際にどのスタイルが当たっているかを見るのが早道です。
症状別チェック表
CSS・JSアニメーションが動かないは、症状を分けずに直そうとすると原因探しが長引きます。まず「自分だけで起きるのか」「全員で起きるのか」「特定ブラウザだけか」「差し替え後だけか」を切り分けます。
確認順序を固定すると、相対パス、ファイル名、キャッシュ、認証、外部読み込みのどこで止まっているかが見えます。修正後はローカル確認だけで終わらせず、実際の共有URLで再表示して、相手と同じ条件で直ったことを確認します。
- 自分だけ表示されない: キャッシュ、ログイン状態、ブラウザ拡張、端末幅を確認する
- 全員で表示されない: ファイル構成、相対パス、大文字小文字、アップロード漏れを見る
- 一部だけ崩れる: CSS/画像/JSごとに読み込みエラーを分ける
- 差し替え後だけ古い: URL、キャッシュ、更新対象ファイルの取り違えを確認する
アニメーションできるプロパティかを確認する
すべてのCSSプロパティがアニメーション可能なわけではありません。displayのように離散的に切り替わるプロパティは、従来は補間できませんでした。heightをautoから特定値へ補間しようとして効かない、というのもよくある躓きです。
パフォーマンスの観点でも、widthやtopなどレイアウトを再計算させるプロパティより、transformやopacityでの表現が滑らかです。位置を動かすなら transform: translate、表示・非表示のフェードは opacity を使うと、効きやすく動きもなめらかになります。何を変化させているかを見直すだけで解決することがあります。
- transform（移動・拡大・回転）はアニメーションに向く
- opacityでのフェードは効きやすく滑らか
- height:autoへの補間や離散的プロパティは効きにくい
- レイアウトを再計算させるプロパティは動きが重くなりやすい
JSアニメーションが動かないときの確認手順
JavaScriptで動かす場合も、止まる箇所は限られています。次の順で確認すると原因に行き着きます。
- 対象要素が取得できているか（セレクタ間違いでnullになっていないか）確認する
- コンソールにエラーが出てスクリプトが途中で止まっていないか見る
- 初期状態を一度描画させてから次のフレームで最終状態へ変えているか確認する
- ループ処理はsetIntervalよりrequestAnimationFrameで組めているか見直す
- 変化させているプロパティがアニメーション可能か確認する
- OSやブラウザの「視差効果を減らす」設定でアニメーションが抑制されていないか確かめる
複数環境でなめらかさを確認する
アニメーションの効き具合やなめらかさは、端末性能やブラウザ、ユーザーのモーション設定によって変わります。自分の環境では滑らかでも、別の端末ではカクついたり、抑制されて動かなかったりします。複数環境で見てもらうのが確実です。
ギガサイト便にHTMLやZIPをドロップすると 〇〇.giga-site.com の共有URLが発行され、HTTPSのエッジ配信で他の人にすぐ見てもらえます。同じURLのまま中身を差し替えられるので、transitionの順序やプロパティを直すたびにリンクを送り直す必要はありません。動きの確認やレビューを依頼する一時共有に向いています。
よくある質問
transitionを書いたのにホバーで一瞬に切り替わってしまいます。
transitionは変化前と変化後の両方の状態が必要です。要素を追加した直後に最終状態を当てると、初期状態が描画されず補間されません。初期状態を一度反映させてから次のフレームで最終状態へ変えると、滑らかに変化します。
animationが全く動きません。
@keyframesの定義名とanimation-nameが一致しているか、animation-durationが0でないかを確認してください。display:noneの要素には効かないため、表示してから動かす必要があります。要素を検証して実際に当たっているスタイルを見ると早く特定できます。
heightをautoへアニメーションさせたいのに効きません。
autoへの補間は効きにくいプロパティです。表現を見直し、開閉ならtransformやopacity、または高さを具体値で与える設計に変えると効きやすくなります。一般にtransformとopacityはアニメーション向きでなめらかです。
自分の環境では滑らかなのに他の人の環境でカクつきます。
端末性能やブラウザ、ユーザーのモーション低減設定で挙動が変わるためです。複数環境で確認するのが確実です。ギガサイト便で共有URLを発行すれば、相手の端末で実際の動きを確かめてもらえます。
原因が分からないときはどこから確認すべきですか？
まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。