CSS変数でアニメーションを自由自在に！初心者向けの動くデザイン作成ガイド

アニメーションやトランジションにCSS変数を使う応用例

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

生徒

「ホームページのボタンがふわっと動いたり、画像がゆっくり大きく見えたりする演出を作りたいです！」

先生

「それはアニメーションやトランジションという機能ですね。実はCSS変数を使うと、その動きをもっと簡単に、効率よく作れるんですよ。」

生徒

「CSS変数でも動きが作れるんですか？難しそうだけど、私にもできますか？」

先生

「もちろんです！色やサイズだけでなく、動きの長さやタイミングを変数で管理する方法を、基礎から丁寧にお教えしますね。」

1. アニメーションとトランジションの基本を知ろう

ウェブサイトに「動き」をつける方法は、大きく分けて二つあります。一つは「トランジション」です。これは、マウスを乗せたときなどに「変化の過程をゆっくり見せる」機能です。たとえば、一瞬で色が変わるのではなく、0.5秒かけてじわじわ変わるような動きを作ります。

もう一つは「アニメーション」です。これは、マウス操作に関係なく、要素が揺れ続けたり、画面外からスッと出てきたりするような、より複雑な動きを指します。パソコンの操作に慣れていない方でも、パラパラ漫画をイメージすると分かりやすいでしょう。 CSS変数（カスタムプロパティ）をこれらの機能と組み合わせることで、動きの速さや移動距離を一箇所でまとめて調整できるようになります。

2. 動きの速さをCSS変数で一括管理する方法

サイト内の色々な場所でアニメーションを使っているとき、「全体の動きをもう少しゆっくりにしたいな」と思うことがあります。一つ一つの設定を書き直すのは大変ですが、あらかじめ「動きの速さ」を変数にしておけば、一箇所書き換えるだけでサイト全体の雰囲気を統一できます。

ここでは「--speed」という名前の変数を作ってみましょう。この箱の中に「0.3s（0.3秒）」という値を入れておきます。 sは秒（セコンド）を表す単位です。この変数を使うことで、全てのボタンの反応速度をぴったり揃えることができるようになります。


<style>
	:root {
		/* 動きの速さを保存する箱 */
		--speed: 0.5s;
		--btn-bg: #007bff;
	}

	.anime-btn {
		background-color: var(--btn-bg);
		color: white;
		padding: 10px 25px;
		border: none;
		border-radius: 5px;
		/* 変化の速さに変数を使う */
		transition: background-color var(--speed), transform var(--speed);
		cursor: pointer;
	}

	.anime-btn:hover {
		background-color: #0056b3;
		transform: scale(1.1); /* 少し大きくする */
	}
</style>

<button class="anime-btn">マウスを乗せてみて！</button>
<p>変数の値を変えるだけで、色の変化や大きさの変化の速さが一気に変わります。</p>

ブラウザ表示

3. 移動距離を変数にしてデザインを調整する

要素がどこから現れるかという「距離」の設定にも、変数は非常に便利です。たとえば、ふわっと浮き上がる演出を作るとき、上に10ピクセル動かすのか、20ピクセル動かすのかを、後から簡単に試行錯誤できます。

プログラミング未経験の方は「10px」といった具体的な数字をCSSの中に直接書いてしまいがちですが、これからは「--move-y」といった名前の箱を用意する習慣をつけましょう。これにより、「スマホで見るときだけ移動距離を短くする」といった応用も、変数の中身を書き換えるだけで済むようになります。

4. 複数の要素が順番に現れる演出を作るテクニック

複数の画像が、左から右へ「ポン、ポン、ポン」と順番に現れるとおしゃれですよね。これは「遅延（ディレイ）」という機能を使います。 CSS変数を使えば、各要素に少しずつ違う数字を渡すだけで、この複雑そうな動きが驚くほどシンプルに作れます。

それぞれのパーツに「--delay-order（何番目に動くか）」という番号を割り振ります。 CSS側では、その番号と「基本の待ち時間」を掛け算するように設定します。初心者の方でも、算数の掛け算のような感覚でアニメーションの順番待ちをコントロールできるようになるのです。


<style>
	:root {
		--fade-speed: 1s;
	}

	.fade-list {
		display: flex;
		gap: 10px;
		list-style: none;
	}

	.fade-item {
		width: 80px;
		height: 80px;
		background-color: #28a745;
		border-radius: 10px;
		opacity: 0; /* 最初は見えなくする */
		/* アニメーションの設定 */
		animation: fadeIn var(--fade-speed) forwards;
		/* 変数を使って待ち時間を計算 */
		animation-delay: calc(var(--delay-order) * 0.2s);
	}

	@keyframes fadeIn {
		to { opacity: 1; }
	}
</style>

<ul class="fade-list">
	<li class="fade-item" style="--delay-order: 1;"></li>
	<li class="fade-item" style="--delay-order: 2;"></li>
	<li class="fade-item" style="--delay-order: 3;"></li>
	<li class="fade-item" style="--delay-order: 4;"></li>
</ul>
<p>各要素に番号（変数）を指定するだけで、順番に表示されます。</p>

ブラウザ表示

5. 画像の明るさや大きさをゆっくり変化させる

画像の演出にも、CSS変数は大活躍します。マウスを乗せたときに、画像がじわーっと明るくなったり、逆に暗くなって文字が浮き上がったりする効果です。

「--img-scale」という変数に、画像の大きさを入れておきましょう。普段は「1」、マウスを乗せたら「1.2」といった具合に数値を変更します。これを「フィルター」や「変形（トランスフォーム）」という機能と組み合わせることで、まるでテレビ番組のような、高級感のある視覚効果を生み出すことができます。


<style>
	.photo-frame {
		--img-bright: 100%;
		--img-zoom: 1;
		width: 150px;
		height: 100px;
		overflow: hidden;
		border: 3px solid #333;
	}

	.photo-frame img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		/* 変化の速さを指定 */
		transition: 0.5s;
		filter: brightness(var(--img-bright));
		transform: scale(var(--img-zoom));
	}

	/* マウスを乗せたときに中身の変数を書き換える */
	.photo-frame:hover {
		--img-bright: 120%;
		--img-zoom: 1.1;
	}
</style>

<div class="photo-frame">
	<img src="/img/sample150-100.jpg" alt="見本画像">
</div>
<p>マウスを乗せると、画像が明るくなりながら少しズームします。</p>

ブラウザ表示

6. calc関数で計算を取り入れる応用術

「calc（カルク）」という言葉が出てきましたが、これはCSSの中で「計算」を行うための便利な機能です。変数の数字に、足し算や掛け算をすることができます。

たとえば、移動距離を決めるときに「--base-move」という変数を「10px」とし、別の場所ではその2倍動かしたい場合に「calc(var(--base-move) * 2)」と書くことができます。こうしておけば、大元の「10px」を「15px」に変更するだけで、2倍の場所も自動的に「30px」に修正されます。この計算との組み合わせこそが、CSS変数を使いこなすプロへの第一歩となります。

7. パソコン初心者でも失敗しない！記述のコツ

アニメーションの設定を書くとき、一番気をつけたいのは「単位」を忘れないことです。動きの速さを指定するとき、「0.5」とだけ書くとパソコンはそれが「秒（s）」なのか「ミリ秒（ms）」なのか判断できず、動きが止まってしまいます。

また、CSS変数は大文字と小文字を厳しく区別します。「--Speed」と「--speed」は別の箱として扱われるので、必ず同じ綴りで書くようにしましょう。最初は難しく感じるかもしれませんが、一度動くコードを完成させてしまえば、あとは中の数字をいじって遊ぶだけです。怖がらずに、色々な数字を入れて動きの変化を楽しんでみてください。

8. アニメーションを滑らかに見せるイージングの変数化

動きの質を左右するのが「イージング」です。これは、動きの始まりと終わりをどう加速・減速させるかという設定です。「最初はゆっくり、最後は速く」といった、人間らしい自然な動きを演出できます。

このイージングの設定は「cubic-bezier（三次ベジェ曲線）」という非常に長い呪文のような数字で指定することがあります。これを毎回書くのは大変なので、「--ease-smooth」といった名前の変数に保存しておきましょう。これだけで、サイト内のすべての動きを「最高に気持ちいい揺れ方」で統一できるようになります。


<style>
	:root {
		/* 気持ちいい動きの設定を保存 */
		--ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
	}

	.bounce-box {
		width: 100px;
		height: 50px;
		background-color: #ffc107;
		text-align: center;
		line-height: 50px;
		transition: transform 0.6s var(--ease-bounce);
		cursor: pointer;
		margin: 20px;
	}

	.bounce-box:hover {
		transform: translateY(-20px);
	}
</style>

<div class="bounce-box">弾むよ！</div>
<p>マウスを乗せると、保存した変数を使って「バウンド」するような動きをします。</p>

ブラウザ表示