【2026年8月最新】CSS Transition完全ガイド｜ホバーアニメーションの作り方と非エンジニアの向き合い方

ボタンにマウスを乗せたら色がふわっと変わる。メニューを開いたらスッと展開する。こうした「カクッと切り替わらず、滑らかに変化する」演出の裏側には、多くの場合CSSのtransitionというプロパティが使われています。

検索するとサンプルコードはすぐに見つかりますが、「なぜ自分のサイトでは効かないのか」「transition-delayって何に使うのか」「animationとは何が違うのか」まで踏み込んで整理された記事は意外と多くありません。この記事では、transitionの基本構文からホバーアニメーションの実装、初心者がつまずきやすい5つの落とし穴までを、コード例つきで一気に整理します。

さらに後半では、視点を変えて「そもそもCSSを自分で書かずに済ませる方法」にも触れます。弊社（株式会社GENAI）はAI導入支援を専門にしている会社で、社内のホームページ修正・LP制作の多くをClaude Codeというツールに任せています。「CSSを覚える」か「AIに任せる」か、どちらが自社にとって合理的かを判断する材料も持ち帰っていただける記事です。

この記事を最後まで読むと、次のことが分かります。

01 CSS BASICS transitionとは何か ホバーで色が変わる、あの「滑らかさ」の正体

transitionは、CSSのあるプロパティの値が変化するときに、その変化を時間をかけて滑らかに見せるための仕組みです。何も指定しなければ、色や大きさの変化は一瞬（0秒）で切り替わりますが、transitionを指定すると「0.3秒かけて徐々に変わる」といった演出になります。

よく引き合いに出される例が、Appleの公式サイトです。ボタンやカードにマウスを乗せると、色や大きさがふわっと変化します。派手なアニメーションではないものの、この「滑らかさ」がサイト全体の高級感・洗練された印象を大きく左右しています。

.button {
  background-color: #dc2626;
  transition: background-color 0.3s ease;
}
.button:hover {
  background-color: #991b1b;
}

上記のコードは、.buttonにマウスを乗せると0.3秒かけて背景色が変化する、というシンプルな例です。transitionの1行を加えるだけで、「パッと切り替わる」動きが「じわっと変わる」動きに変わります。

1-1. transitionが必要な理由

なぜわざわざtransitionを指定する必要があるのでしょうか。理由はシンプルで、変化が一瞬だと、ユーザーは「何が変わったのか」を認識しづらいからです。ボタンの色が一瞬で切り替わると、クリックできる要素だと気づかれにくかったり、逆に安っぽい印象を与えたりします。

1-2. どんなプロパティに使えるのか

transitionは、数値で表現できる多くのCSSプロパティに使えます。代表的なものを整理すると以下の通りです。

対象プロパティ	変化する内容	よくある用途
background-color	背景色	ボタン・カードのホバー演出
color	文字色	リンクのホバー演出
opacity	透明度	フェードイン・フェードアウト
transform	回転・拡大縮小・移動	ホバー時の拡大、カードの浮き上がり
width / height	幅・高さ	アコーディオンの開閉、プログレスバー

02 HANDS-ON 実践：ホバーアニメーションの作り方 複数プロパティの同時変化・カード演出まで実装する

ここからは、実務でよく使われる3つのパターンを、実際のコードとあわせて見ていきます。理屈よりも先にコードを見た方が理解が早い、という方はこの章から読み進めてください。

2-1. 複数プロパティを同時に変化させる

transitionは、複数のプロパティをカンマ区切りで同時に指定できます。例えば「背景色」と「大きさ」を同時に変化させたい場合は、以下のように書きます。

.card {
  width: 200px;
  height: 120px;
  background-color: #f8f9fa;
  transition: width 0.3s, height 0.3s, background-color 0.3s;
}
.card:hover {
  width: 220px;
  height: 132px;
  background-color: #fee2e2;
}

すべて同じ0.3秒で変化させるなら、transition: all 0.3s;と省略することも可能です。ただし後述するように、allの多用はパフォーマンス面で推奨されません。基本は変化させたいプロパティを個別に列挙するのが安全です。

2-2. ホバー時に色と透明度を変える

opacity（透明度）とbackground-color（背景色）を組み合わせると、ボタンの「押せそうな見た目」を強調できます。

.link-card {
  opacity: 0.85;
  background-color: #ffffff;
  transition: opacity 0.25s ease, background-color 0.25s ease;
}
.link-card:hover {
  opacity: 1;
  background-color: #fef2f2;
}

2-3. transformと組み合わせたカード演出

transitionの真価が発揮されるのは、transform（拡大・縮小・回転・移動）と組み合わせたときです。カードにマウスを乗せると少し浮き上がるような演出は、以下のように実装します。

.product-card {
  transform: scale(1) translateY(0);
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.product-card:hover {
  transform: scale(1.03) translateY(-4px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.15);
}

この例では、ホバー時に「少し拡大（scale）」「少し上に移動（translateY）」「影を濃くする」の3つを同時に変化させています。ECサイトの商品一覧やサービス紹介カードで頻繁に見かける演出です。

03 FOUR PROPERTIES 4つの構成プロパティを使いこなす property / duration / delay / timing-function を分解して理解する

ここまではtransition: 対象 時間 イージング;という短縮記法（ショートハンド）で書いてきました。実はtransitionは、以下の4つのプロパティの組み合わせでできています。それぞれを分解して理解すると、複雑な演出も自在に組み立てられるようになります。

プロパティ	役割	指定例
transition-property	変化させる対象のプロパティ名	background-color, transform
transition-duration	変化にかける時間	0.3s（300ms）
transition-delay	変化を開始するまでの待ち時間	0.1s
transition-timing-function	変化の緩急（イージング）	ease, ease-in-out, linear

3-1. transition-property：対象を絞る

transition-propertyは、どのプロパティにtransitionを適用するかを指定します。前述の通りallも指定できますが、パフォーマンスと保守性の観点から、必要なプロパティだけを列挙するのが基本です。

3-2. transition-duration：時間の感覚をつかむ

transition-durationは変化にかける時間で、秒（s）またはミリ秒（ms）で指定します。感覚的な目安は以下の通りです。

時間の目安	体感	向いている用途
0.1〜0.2秒	キビキビ・即座に反応	ボタンのクリック反応、小さいアイコン
0.3〜0.4秒	滑らか・上品	ホバーアニメーション全般（最も汎用的）
0.5秒以上	ゆったり・演出強め	フェードイン、モーダルの表示演出
1秒以上	意図的にゆっくり	大きな要素の展開、注目させたい演出

3-3. transition-delay：タイミングをずらす

transition-delayは、変化が「始まるまで」の待ち時間を指定します。複数の要素に少しずつ異なるdelayを設定すると、要素が順番に変化していく「時差アニメーション」を演出できます。

.item:nth-child(1) { transition-delay: 0s; }
.item:nth-child(2) { transition-delay: 0.1s; }
.item:nth-child(3) { transition-delay: 0.2s; }

3-4. transition-timing-function：緩急をつける

transition-timing-functionは、変化の「速度の変わり方（イージング）」を指定します。同じ0.3秒でも、この指定次第で体感の印象が大きく変わります。

値	動きの特徴	印象
linear	常に一定速度	機械的、ローディングバーなど
ease	最初と最後がゆっくり（初期値）	自然で万能、迷ったらこれ
ease-in	最初ゆっくり、後半に加速	要素が「動き出す」感じ
ease-out	最初速く、後半にゆっくり	要素が「着地する」感じ
ease-in-out	最初と最後がゆっくり、中間が速い	easeより丁寧で上品な印象

04 VS ANIMATION animationとの違いと使い分け 「状態変化」に反応するか、「自律的に動き続ける」か

CSSには、transitionとよく混同されるanimationというプロパティがあります。両方とも「動きをつける」機能ですが、根本的な仕組みが異なります。

比較項目	transition	animation
発動のきっかけ	ホバーやクラス切り替えなど「状態の変化」が必要	ページ読み込み時など自動的に開始できる
繰り返し	基本的に1回きり（状態が戻れば逆再生）	infiniteで無限ループが可能
中間の動き	開始値と終了値の間を自動補間するのみ	@keyframesで細かい中間ステップを指定できる
実装の手軽さ	◎ 2〜3行で完結	△ @keyframesの定義が別途必要
向いている用途	ホバーアニメーション、開閉アニメーション	ローディングスピナー、常時稼働の装飾演出

簡単に言えば、「ユーザーの操作に反応して動かしたい」ならtransition、「操作と関係なく動き続けさせたい」ならanimationです。ローディング中にぐるぐる回るスピナーはユーザー操作と無関係に動き続けるため、animationで実装します。

/* animationの例：ローディングスピナー */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.spinner {
  animation: spin 1s linear infinite;
}

05 COMMON PITFALLS 実装でつまずく5つの落とし穴 初心者が高確率でハマるポイントを先回りして解説

transitionは書き方自体はシンプルですが、実務では「指定したのに動かない」「カクカクする」というトラブルが頻発します。ここでは代表的な5つの落とし穴を紹介します。

5-1. 落とし穴①：displayプロパティには効かない

display: none;からdisplay: block;への切り替えのように、displayプロパティの変化にはtransitionが効きません。displayは「表示する/しない」の二値であり、中間の状態が存在しないためです。

5-2. 落とし穴②：疑似クラスの発火条件を勘違いする

:hoverのような疑似クラスは、マウスが乗っている要素そのものに対して発火します。「親要素にhoverしたら子要素を変化させたい」場合は、指定の書き方に注意が必要です。

/* NG想定: .child自体にhoverしないと反応しない */
.child:hover { opacity: 1; }

/* OK: 親要素へのhoverで子要素を変化させる */
.parent:hover .child {
  opacity: 1;
  transition: opacity 0.3s;
}

5-3. 落とし穴③：display:inline;の要素には一部のtransformが効かない

display: inline;（テキストの一部のように扱われる表示形式）が指定された要素には、transformを含む一部のプロパティが効きません。transitionそのものは動いていても、見た目の変化が起きないため「効いていない」と誤解しやすいポイントです。

5-4. 落とし穴④：JavaScriptで直後に値を変えても反応しない

JavaScriptで要素を生成した直後に、同じタイミングでスタイルを変更すると、ブラウザが変化を1フレームで処理してしまい、transitionが効かず一瞬で切り替わることがあります。これはJavaScript連携でよく相談される不具合です。

この問題に対処するには、要素の追加とスタイル変更の間にわずかな時間差を作る必要があります。実務ではrequestAnimationFrameやsetTimeoutを使ったタイミング調整が定番です。

5-5. 落とし穴⑤：transitionendイベントが複数発火する

JavaScriptで「アニメーションが終わったら次の処理をする」という制御をしたい場合、transitionendイベントを使いますが、複数のプロパティを同時に変化させているとプロパティの数だけイベントが発火してしまい、意図せず処理が重複することがあります。

el.addEventListener('transitionend', (e) => {
  if (e.propertyName !== 'transform') return; // 対象を絞って重複発火を防ぐ
  console.log('アニメーション完了');
});

06 FOR NON-ENGINEERS 【独自】非エンジニアがtransition実装で消耗しない方法 「覚える」か「任せる」か、現実的な選択肢を整理する

ここまでtransitionの基本を解説してきましたが、正直なところ「自社サイトのボタンを少し滑らかにしたいだけなのに、ここまで理解する必要があるのか」と感じた経営者・担当者の方も多いのではないでしょうか。

弊社（株式会社GENAI）はAI導入支援を専門にしており、日々さまざまな企業のホームページ・LP（ランディングページ）の細かな修正依頼を目にしています。その中で強く感じるのは、「CSSを覚える」ことと「CSSの成果物を手に入れる」ことは、実は別の話だという点です。

6-1. 旧来のCSS修正フロー：依頼から反映まで数日かかる

多くの中小企業では、ホームページのちょっとした修正（ボタンのホバー演出追加、色の変更など）でも、以下のような重いフローを踏んでいるのが実情です。

「ボタンのホバーを滑らかにしたいだけ」のような小さな修正のために、この重いフローを毎回回すのは明らかに非効率です。かといって、経営者や担当者がゼロからCSSを勉強する時間的余裕もないのが現実でしょう。

6-2. Claude Codeに任せるフロー：指示から数分で反映

弊社が実際に採用しているのは、Claude CodeというAIエージェントツールに、コーディング作業そのものを任せる方法です。「このボタンにホバーしたら色がふわっと変わるようにして」と日本語で指示するだけで、AIがCSSコードを書き、ファイルを編集し、動作確認までを自律的に行います。

上記のような指示は、いずれも数分〜十数分で実装が完了します。CSSの構文を1文字も知らなくても、「何をしたいか」を言語化できれば成果物が手に入る、というのがAIコーディングエージェントの最大の価値です。

6-3. 「覚える」と「任せる」、結局どちらを選ぶべきか

ここまで読んで、「自分でCSSを覚えるべきか、それともAIに任せるべきか」を迷っている方に向けて、弊社なりの判断基準を整理します。答えは「頻度」と「複雑さ」の2軸で決まります。

状況	推奨	理由
月に1〜2回、簡単な色や動きの修正がある程度	AIに都度任せる	学習コストの方が高くつく。指示するだけで十分
週に何度もサイトを触る、事業のコアがWeb制作	基本文法だけでも学ぶ価値あり	AIへの指示の解像度が上がり、レビュー精度も上がる
社内にエンジニアがいない小規模事業者	AIに全面的に任せる	採用・外注コストと比べて圧倒的に低コスト
大規模なシステム開発・複雑な要件がある	専門エンジニア + AI補助	AI単体では設計判断が必要な領域まではカバーしきれない

多くの中小企業・個人事業主にとっては、上から2つ目までのケースに当てはまることがほとんどでしょう。「頻度が低く、内容もシンプル」な修正であれば、CSSを体系的に学ぶ時間そのものが機会損失になります。その時間を本業に充てて、実装はAIに任せる方が合理的な判断です。

07 GENAI CASE STUDY 【独自】GENAI社内でのAIコーディング実運用データ Max 20xプラン契約会社が、コーディング作業にどれだけ時間を使っているか

ここでは、弊社（株式会社GENAI）が実際にどの程度AIコーディングに業務を委ねているかを、数値ベースで紹介します。

項目	内容
契約プラン	Claude Max 20x（月$200 / 約30,000円）
利用開始	2025年後半〜
開発関連の用途	WordPress/HTML/LP制作、CSSアニメーション実装、スクリプト書き捨て
削減効果（開発領域・肌感）	都度数時間単位の削減

弊社では、Claude Max 20xプラン（月額約30,000円）を契約し、経営・営業・広告・開発・経理・秘書業務まで社内のあらゆる業務でClaude Codeを活用しています。開発領域に限定すると、ホームページやLPの細かな修正・ホバーアニメーションの実装・使い捨てのスクリプト作成などを、都度Claude Codeに任せる運用です。

業務領域	主な用途	概算削減時間
営業	提案書・見積・顧客別資料の自動生成	週20時間 → 週2時間
広告運用	週次レポート・CPA分析・配信内容調整	週10時間 → 週1時間
ブログ記事	SEO記事執筆・リライト・内部リンク最適化	1本8時間 → 1本1時間
開発	WordPress/HTML/LP制作、CSSアニメーション実装	都度数時間の削減
経理	請求書チェック・経費仕訳・Freee連携	月40時間 → 月5時間

あくまで肌感ベースの概算ですが、開発領域だけを見ても「制作会社に見積を取って数日待つ」という時間を、その場で数分〜数十分に圧縮できている実感があります。もちろん複雑な機能開発は別ですが、「ボタンのホバーを滑らかにしたい」「カードが浮き上がる演出を追加したい」レベルの修正であれば、この記事で紹介したフローで十分に対応可能です。

08 CONCLUSION まとめ ── 「滑らかさ」は覚えるより使う時代へ transitionを覚えるか、AIに任せるか。判断基準を整理する

この記事では、CSSのtransitionの基本構文から、ホバーアニメーションの実装、transition-property/duration/delay/timing-functionの4つの構成要素、animationとの違い、初心者がつまずきやすい5つの落とし穴までを解説しました。最後にポイントを振り返ります。

CSSの知識は、深く学べば学ぶほど自由度が上がります。ただし、経営者や非エンジニアの担当者にとって本当に大事なのは「transitionの構文を暗記すること」ではなく「やりたい滑らかさを、必要なタイミングで実現できること」ではないでしょうか。

自分で書くにせよAIに任せるにせよ、この記事で紹介した基本用語（transition、transition-property、イージング、疑似クラス）を押さえておけば、制作会社やAIに指示を出すときの解像度が格段に上がります。まずは自社サイトの気になるボタンやカードを1つだけ選んで、試しに動かしてみることをおすすめします。

「CSSを覚えるべきか、AIに任せるべきか」という問いに唯一の正解はありません。ただ、少なくとも「知らないから何もできない」という状態から抜け出す手段は、もはや学習だけではないということは、この記事を通じて伝わったのではないかと思います。基礎知識を押さえつつ、実装は状況に応じてAIも活用する。それが2026年時点での現実的な向き合い方です。

CSS修正のたびに外注する時代を、AI鬼管理が終わらせます

「ホバー演出を滑らかにしたい」レベルの小さな修正から、業務全体の自動化まで。
弊社の実運用ノウハウをベースに、貴社に合わせた導入設計をご提案します。

ここから先の進め方は、大きく2つあります。

自社で回せるようになりたい方は、AI鬼管理でClaude Code／Codexの使い方から業務設計・社内定着まで伴走を受けながら、社内に仕組みを作る道があります。

覚えるより任せたい方は、AIBPO by AI鬼管理でこの記事のような定型業務を丸ごと預ける道があります。総額はいまの業務コストの70〜80%が目安、月額基本料は0円です。

どちらが合うかは、業務量と社内体制次第です。無料相談・無料適合診断で、貴社の場合はどちらが向くかからご相談いただけます。

よくある質問

Q. transitionとtransform、何が違うのですか？

A. transitionは「変化を滑らかに見せる仕組み」で、transformは「回転・拡大縮小・移動といった変形そのもの」を指定するプロパティです。transformだけを指定すると変化は一瞬で切り替わり、transitionと組み合わせて初めて「滑らかに変形する」演出になります。両者は役割が異なるため、セットで使われることが多い組み合わせです。

Q. transitionを指定したのに全く動かないのはなぜですか？

A. 最も多い原因は、状態変化そのものが発生していないケースです。:hoverなど疑似クラス側で実際に値が変わっているか、対象プロパティがtransition-propertyに含まれているか、displayなど対応していないプロパティを指定していないかを順に確認してください。inline要素にtransformが効かないケースも頻出です。

Q. transitionとanimation、両方同時に使うことはできますか？

A. 可能です。例えば「ホバー時は素早く反応（transition）、通常時は常にゆっくり動き続ける（animation）」のように組み合わせるケースもあります。ただし同じプロパティに対して両方を指定すると意図しない挙動になることがあるため、対象プロパティを分けるのが安全です。

Q. transition: all はどんなときに使ってよいのですか？

A. 簡易的な検証やプロトタイプ段階では便利ですが、本番環境では非推奨です。allを指定すると変化しうる全プロパティが対象になり、意図しないアニメーションやパフォーマンス低下を招く可能性があります。本番反映時は対象プロパティを個別に列挙するのが安全です。

Q. CSSの知識が全くない状態でも、AIにコーディングを任せられますか？

A. 任せられます。重要なのは構文の知識ではなく「何を実現したいか」を言語化することです。「このボタンをホバーで滑らかに色を変えたい」のような日本語の指示だけで、Claude CodeのようなAIエージェントがコードを実装してくれます。

Q. スマートフォン表示でもtransitionは同じように動きますか？

A. 基本的には同じように動作しますが、スマートフォンには「ホバー」という概念自体が存在しない点に注意が必要です。タップ操作を前提とした:activeなど、別の疑似クラスと組み合わせる設計が必要になるケースがあります。

Q. AIにサイト修正を任せる場合、セキュリティ面は大丈夫ですか？

A. 実装後に人間が動作確認する運用を徹底すれば、通常のホームページ修正と同様のリスク管理で問題ありません。特に決済・フォームなど事業に直結する重要な箇所は、公開前に必ず目視確認するフローを組み込むことをおすすめします。

AIAI鬼管理

AI鬼管理／AIBPO by AI鬼管理へのお問い合わせ

この記事を読んで気になった方へ。
専門スタッフが、御社に最適な
業務自動化・業務代行プランを無料でご提案します。

ご希望のサービス

お問い合わせ対象のサービス*必須 選択してください AI鬼管理（AI業務自動化の導入支援） AIBPO by AI鬼管理（業務の丸ごと代行） 両方・相談して決めたい

サービスを選択してください

---

お客様情報

会社名・屋号*必須

会社名を入力してください

業種*必須 選択してください IT・ソフトウェア 製造業 建設・不動産 小売・EC 飲食・宿泊 医療・介護 教育・研修 士業・コンサル 人材・BPO その他

業種を選択してください

お名前*必須

お名前を入力してください

メールアドレス*必須

※法人・事業用のメールアドレスでお願いします（Gmail等の個人用フリーメールは受付できません）

正しいメールアドレスを入力してください

電話番号任意

---

現在の課題について

現在感じている課題*必須

人手不足で業務が回らない 社長・経営者が現場を離れられない 定型業務に時間を取られている AIを導入したいが何から始めればいいかわからない 外注・人件費コストが高い 業務フローが属人化している 社員のITリテラシーにばらつきがある

1つ以上選択してください

効率化・自動化したい業務*必須

営業・顧客対応（CRM・メール等） 経理・請求書・入金管理 採用・人事・労務管理 マーケティング・SNS・広告運用 カスタマーサポート・問い合わせ対応 資料作成・レポート・議事録 データ入力・集計・分析 社内の情報共有・ナレッジ管理

1つ以上選択してください

上記業務に現在かけている月額コスト*必須 選択してください まだかけていない（これから検討） 〜10万円 10〜30万円 30〜50万円 50〜100万円 100万円以上 その他（自由入力）

月額コストを選択してください

その他、ご相談内容任意

---

面談日時の選択

ご希望の日時*必須

約1時間のオンライン面談（Google Meet）です

空き枠を取得中...

面談日時を選択してください

この内容で面談を予約する

予約確定後、Google Calendarの招待メールをお届けします。
しつこい営業は一切ございません。