CSSアニメーションとトランジションの違いを完全ガイド！初心者でもわかる動きの作り方

CSSアニメーションとトランジションの違いを理解しよう

先生と生徒の会話形式で理解しよう

生徒

「ホームページのボタンにマウスを置いたとき、ふわっと色を変えたり、画像を動かしたりしたいのですが、どうすればいいですか？」

先生

「それはCSSの『トランジション』や『アニメーション』という機能を使えば実現できますよ。」

生徒

「二つもあるんですか？どちらを使えばいいのか迷ってしまいそうです。」

先生

「使い分けには明確なルールがあるんです。まずはそれぞれの特徴を一緒に見ていきましょう！」

1. CSSで動きを作る二つの方法とは？

ウェブサイトに動きをつけるCSSには、主にトランジション（Transition）とアニメーション（Animation）の二種類があります。どちらも「静止している要素を動かす」という点では同じですが、その仕組みや使いどころが異なります。

パソコンを触ったことがない方に例えると、トランジションは「部屋の照明スイッチ」のようなものです。スイッチを押すとパッとつくのではなく、ゆっくり明るくなるイメージです。一方で、アニメーションは「テレビ番組や映画」のようなものです。スイッチを操作しなくても、決められたシナリオ通りに勝手に動き続けます。この「きっかけが必要かどうか」と「複雑な動きができるか」が大きな違いとなります。

2. トランジション（Transition）の特徴を理解しよう

トランジションは、日本語で「移り変わり」や「変化」という意味です。CSSの世界では、ある状態から別の状態へ「滑らかに変化させる」ときに使います。最大の特徴は、変化のきっかけ（イベント）が必要であることです。例えば、「マウスを上に乗せた（ホバーした）とき」や「ボタンをクリックしたとき」などがそのきっかけに当たります。

使い方は非常にシンプルで、変化前の状態に「何秒かけて変化させるか」を指定するだけです。二つの地点（開始と終了）をつなぐだけなので、設定も簡単で初心者の方におすすめです。ボタンの色がふわっと変わるような、さりげない演出に向いています。


<style>
	.trans-btn {
		background-color: #007bff;
		color: white;
		padding: 15px 30px;
		border: none;
		/* 0.5秒かけて変化させる設定 */
		transition: background-color 0.5s;
		cursor: pointer;
	}
	/* マウスを乗せたときの指示 */
	.trans-btn:hover {
		background-color: #ffc107;
	}
</style>

<button class="trans-btn">マウスを乗せてみて！</button>

ブラウザ表示

3. アニメーション（Animation）の特徴を理解しよう

アニメーションは、トランジションよりも自由度が高く、複雑な動きを作ることができます。最大の特徴は、マウス操作などのきっかけがなくても、ページを開いた瞬間に自動で動き出せること、そして「何度も繰り返す」ことができる点です。

トランジションが「開始と終了」の二点間だけの変化だったのに対し、アニメーションは「途中で一回転する」「少し止まる」「大きくなってから小さくなる」といった、複数のステップを設定できます。このステップの設計図のことをキーフレーム（@keyframes）と呼びます。お店の看板が点滅したり、キャラクターが歩き続けたりするような、注目を集めたい場所に最適です。

4. キーフレーム（@keyframes）の使い方

アニメーションを作るには、まず「どんな動きをするか」という名前をつけた設計図を作ります。これが @keyframes です。設計図の中では、0パーセント（開始時）から100パーセント（終了時）までの間に、どのタイミングでどんな見た目にするかを自由に書き込みます。

設計図ができたら、動かしたい対象のタグに対して、「この名前の設計図を使って、〇秒間で動いてね」と指示を出します。最初は難しく感じるかもしれませんが、要領はパラパラ漫画と同じです。一枚一枚の絵の指示をまとめて書くイメージで進めましょう。


<style>
	/* 動きの設計図を作る */
	@keyframes hop-move {
		0% { transform: translateY(0); }
		50% { transform: translateY(-20px); }
		100% { transform: translateY(0); }
	}
	.anime-box {
		width: 100px;
		height: 100px;
		background-color: #28a745;
		/* 設計図名、2秒間、無限に繰り返す */
		animation: hop-move 2s infinite;
		text-align: center;
		color: white;
		line-height: 100px;
	}
</style>

<div class="anime-box">ぴょんぴょん</div>

ブラウザ表示

5. トランジションとアニメーションの使い分け基準

どちらを使うか迷ったときは、まず「ユーザーの操作に反応させたいか」を確認しましょう。ボタンの反応やリンクの色の変化など、リアクション（反応）として動かしたい場合はトランジションが正解です。一方で、自動でロゴがゆらゆら動いたり、スライドショーのように画像が勝手に切り替わったりする場合はアニメーションを使います。

また、「繰り返す必要があるか」も重要な判断基準です。トランジションは一回の変化で終わりますが、アニメーションは infinite（インフィニット：無限という意味）という指定をすれば、ページが閉じられるまでずっと動かし続けることが可能です。目的に合わせて適切な道具を選べるようになると、プロの制作現場でも通用するスキルになります。

6. 動きのスピード感を調整するイージング

動きを滑らかにするために欠かせない設定がイージング（Easing）です。これは、動きの「加速や減速」をコントロールするものです。例えば、最初から最後まで同じスピードで動くのか、最初はゆっくりで後半に加速するのかといった調整ができます。

代表的な設定値には ease（自然な加速減速）、linear（一定の速度）、ease-in（ゆっくり始まる）などがあります。パソコン初心者の方は、まずは ease を使ってみてください。これが最も人間の目に自然に見える設定です。イージングを使いこなすと、単なる「動作」が、生き生きとした「演出」に変わります。


<style>
	.roll-box {
		width: 80px;
		height: 80px;
		background-color: #dc3545;
		transition: transform 1s ease-in-out;
		display: inline-block;
	}
	/* マウスを乗せると一回転する */
	.roll-box:hover {
		transform: rotate(360deg);
	}
</style>

<div class="roll-box"></div>
<p>上の赤い箱にマウスを乗せてみてね。一回転するよ！</p>

ブラウザ表示

7. アニメーションを組み合わせて高度な演出を作る

アニメーションのすごいところは、複数の設定を同時にかけられる点です。大きさを変えながら、色も変え、さらに位置も移動させるといったことが一つの設計図の中で完結します。例えば、ふわふわ浮かびながら徐々に透明になっていくような幻想的な効果も、CSSだけで作ることができます。

こうした効果を画像（imgタグ）に適用すれば、ただの静止画が魅力的なバナー広告のように見えます。プログラミングのコードは短く、見た目は豪華に。これが効率的なホームページ制作のコツです。画像を使用する際は、フォルダ内のパスを正しく指定することを忘れないようにしましょう。


<style>
	@keyframes zoom-fade {
		0% { transform: scale(1); opacity: 1; }
		100% { transform: scale(1.2); opacity: 0.5; }
	}
	.sample-img {
		width: 150px;
		animation: zoom-fade 3s infinite alternate;
	}
</style>

<img src="/img/sample150-100.jpg" class="sample-img" alt="サンプル画像">

ブラウザ表示

8. パソコン初心者が陥りやすい注意点

CSSで動きを作る際によくあるミスは、スペル間違いと「セミコロン」の忘れです。animation や transition といった英単語は、一文字でも違うと全く動きません。また、命令の最後につける ;（セミコロン）を忘れると、パソコンが「どこで命令が終わったのか」を理解できず、エラーになってしまいます。

また、動きを激しくしすぎるのも禁物です。サイトのあちこちで物が動き回っていると、見ている人は疲れてしまい、本当に伝えたい情報が頭に入らなくなります。アニメーションは「ここぞ」という隠し味として使うのが、センスの良いホームページを作る秘訣です。

9. ブラウザの開発者ツールで動きをテストする

自分が書いたアニメーションが思った通りに動かないときは、ブラウザの「開発者ツール」を活用しましょう。画面を右クリックして「検証」を選ぶと、今の設定がどうなっているかを確認できます。ツール上で直接秒数を書き換えてみて、一番きれいに見えるスピードを探るテスト作業が非常にスムーズになります。

特にイージングのカーブを視覚的にいじることができる機能もあり、数学的な知識がなくても感覚的に滑らかな動きを作り上げることができます。デバッグ（間違い探し）をする際にも、どのCSSが効いているかを一目で判断できるため、開発者ツールはプロにとっての必須アイテムです。

10. 動きの調整でユーザーに優しいサイトへ

最後に、アクセシビリティ（誰にとっても使いやすいこと）についてもお話しします。世の中には、激しい点滅や動きによって気分が悪くなってしまう方もいます。そのため、最近のウェブ制作では「動きを抑える設定」をしている人にはアニメーションを見せないといった配慮をすることもあります。

自分の満足だけでなく、サイトを訪れるすべての人が心地よく閲覧できるように、適度な速度、適度な回数を意識して設定を調整しましょう。優しさと遊び心の詰まったアニメーションは、あなたのウェブサイトをより素晴らしいものにしてくれるはずです。まずは簡単な色変化から始めて、徐々に大きな動きに挑戦していきましょう！

2026年最新スキルアップ・実践セミナー