CSSトランジション入門：transitionプロパティで滑らかなアニメーションを実現する方法

Webページをデザインしていると、要素に変化（トランジション）を加えたくなることがあります。トランジションは、特定の条件が満たされたときに発動します。たとえば、ユーザーがボタンにカーソルを合わせた（ホバーした）ときに、ボタンの背景色を変えたいといったケースです。

CSSのtransitionプロパティとそのサブプロパティを使えば、HTML要素のプロパティが変化したときにアニメーション効果を作り出せます。

この記事では、具体的な例を交えながらCSSトランジションの基本と、transitionプロパティを使ってCSSアニメーションを作成する方法を解説します。読み終える頃には、CSSトランジションをプロのように扱えるようになっているでしょう。

CSSトランジションとは

デフォルトでは、CSSプロパティの値が変化すると、その変更は即座にページへ反映されます。

たとえば、カーソルがボタン上に乗ったときに発動するスタイル変更を作った場合、ユーザーがカーソルを合わせた瞬間に新しいスタイルが適用され、カーソルが離れると同時に元のスタイルへ一瞬で戻ります。

CSSトランジション機能は、2つのスタイルの間に滑らかな移行を作り出すために使われます。transitionプロパティを使用すると、2つのスタイル間の変化がアニメーションとして描画され、より見栄えの良いスタイル変更を実現できます。

CSSトランジションを構成する要素は次の2つです。

• 要素に適用したい新しいCSSプロパティ
• トランジションの継続時間

デフォルトでは、トランジションの継続時間は0秒に設定されています。つまり、継続時間を指定しない場合、指定したトランジションは効果を持たず、スタイルの変更は即時に発生します。

CSSトランジションの実例

ここで、Webサイト用のボタンをデザインしていると仮定しましょう。ユーザーがカーソルを合わせたときにボタンのスタイルを変えたいとします。カーソルが乗っていないときは青い枠線を表示し、ホバーすると背景色がデフォルトの白から青に変わるようにします。

どちらの状態でも、ボタンは縦100px・横100pxで、テキストは中央揃えにします。また、2つの状態の切り替えには2秒かかるようにします。

このボタンを作成するコードは以下の通りです。

index.html

<div><p>これはボタンです。</p></div>

styles.css

div {
	width: 100px;
	height: 100px;
	text-align: center;
	border: solid 3px #33CCFF;
	transition: background-color 2s;
}

div:hover {
	background-color: #33CCFF;
}

このコードでは、ボタンのサイズを100px×100pxにし、内容を中央揃えに設定しています。さらに、幅3pxの青い実線の枠線も指定しました。

ボタンにカーソルを合わせると背景色が青に変わり、カーソルを離すと白に戻ります。

この例では、background-colorプロパティに対して2秒のトランジション期間を指定しています。つまり、ユーザーがボタンにカーソルを合わせると、背景色が白から青へ完全に変わるまで2秒かかるということです。変更は瞬時には起こりません。

同様に、カーソルをボタンから離すと、背景色は2秒かけて青から白へ戻ります。これにより、カーソルの位置に応じて、新しい背景色への切り替えと復帰の両方で、滑らかな2秒間のトランジションが実現できます。

そして、ユーザーがボタンにカーソルを合わせたときに発動させたいスタイルを指定しました。これは:hoverセレクターを使って実現しています。:hoverセレクター内で定義されたスタイルは、ユーザーがその要素にカーソルを合わせたときに適用されます。

CSSの:hoverセレクターについて詳しく知りたい方は、専用の解説ガイドを参照してください。

トランジションの速度曲線

transition-timing-functionプロパティを使うと、トランジション効果の速度曲線を指定できます。このプロパティが受け付ける主な値は以下の通りです。

値	速度曲線の説明
ease	ゆっくり始まり、加速し、ゆっくり終わる （デフォルト値）
ease-in	ゆっくり始まり、その後加速する
ease-out	速く始まり、ゆっくり終わる
linear	始めから終わりまで一定の速度
cubic-bezier(n,n,n,n)	3次ベジェ曲線によるトランジション

ご覧のとおり、表の最初の値「ease」がデフォルト値です。つまり、transition-timing-functionプロパティに値を指定しない、あるいはプロパティ自体を記述しなかった場合は、自動的にこの値が使用されます。

先ほどの例のコードを使って、transition-timing-functionプロパティの動きを見てみましょう。前の例では「ease」の速度曲線を指定していたため、ボタンのスタイルはゆっくり始まり、加速し、ゆっくり終わる形で変化していました。

しかし、ボタンの背景色を一定の速度で変化させたい場合はどうすればよいでしょうか。「linear」を指定することで実現できます。コードは以下の通りです。

<div><p>これはボタンです。</p></div>

div {
	width: 100px;
	height: 100px;
	text-align: center;
	border: solid 3px #33CCFF;
	transition: background-color 2s linear 0.5s;
}

div:hover {
	background-color: #33CCFF;
}

スタイルはほぼ前の例と同じですが、easeではなくlinearを指定している点が異なります。これにより、トランジションが発動してからの速度は常に一定になります。

トランジションの遅延

transition-delayプロパティを使うと、トランジション効果の開始を遅らせられます。指定する値は秒単位です。

たとえば、ボタンの背景色を1秒の遅延後に変化させたいとしましょう。以下のコードで実現できます。

<div><p>これはボタンです。</p></div>

div {
	width: 100px;
	height: 100px;
	text-align: center;
	border: solid 3px #33CCFF;
	transition: background-color ease-in 0.5s;
	transition-delay: 1s;
}

div:hover {
	background-color: #33CCFF;
}

このコードでは、トランジションの遅延を1秒に指定しています。そのため、ユーザーがボタンにカーソルを合わせてから1秒経過するまで、トランジションは開始されません。

複数のトランジションを適用する

トランジションを扱っていると、複数のトランジション効果を同時に適用したくなることがあります。

その場合は、複数のトランジションをカンマで区切って指定します。各トランジションには、継続時間や速度曲線など、通常のトランジションと同じ属性を個別に設定できます。

たとえば、先ほどのボタンの例で、背景色を青に変えるだけでなく、枠線の色もピンクに変えたいとしましょう。どちらもユーザーがホバーしたときに発生するようにします。以下のコードで実現できます。

div {
	width: 100px;
	height: 100px;
	text-align: center;
	border: solid 3px #33CCFF;
	transition: background-color 2s, border 2s;
}

div:hover {
	background-color: #33CCFF;
	border: solid 3px lightpink;
}

ボタンにカーソルを合わせると、背景色が青に変わり、同時に枠線の色がライトピンクに変わります。このトランジションの完了には2秒かかります。

なお、トランジションのリスト内での順序は、表示される結果に影響しません。

CSSトランジション：ショートハンドとロングハンド

ここまでの例では、transitionプロパティを使ってトランジションをスタイリングしてきました。transitionプロパティは、CSSでトランジションを定義するための4つの個別サブプロパティのショートハンド（省略記法）です。4つのサブプロパティは以下の通りです。

• transition-property：トランジション効果を適用するプロパティを設定する
• transition-duration：トランジションの継続時間を示す
• transition-timing-function：トランジションの速度を定義する
• transition-delay：トランジションの開始を遅らせる

先ほどの例を使って、これらのプロパティの働きを見てみましょう。青い枠線・白い背景・中央揃えテキストを持つ100px×100pxのボタンを作り、ホバーすると背景色が青に遷移するようにします。トランジションは2秒かかり、ホバー開始から0.5秒後に始まるものとします。

以下のコードで実現できます。

<div><p>これはボタンです。</p></div>

div {
	width: 100px;
	height: 100px;
	text-align: center;
	border: solid 3px #33CCFF;
	transition-property: background-color;
	transition-duration: 2s;
	transition-timing-function: ease;
	transition-delay: 0.5s;
}

div:hover {
	background-color: #33CCFF;
}

ご覧のとおり、青い背景色へ遷移し、また戻るボタンが完成しました。それぞれ、カーソルが乗ったときと離れたときに発生します。

このコードでは、4つのトランジションサブプロパティ（transition-property、transition-duration、transition-timing-function、transition-delay）を指定しています。さらに、先ほどの例と同じスタイルで、高さ・幅・テキストの配置・枠線の色を設定しました。

一方で、transitionショートハンドを使うこともできます。ショートハンドを使えば、4行に分けて書いていたトランジションの指定を1行で済ませられます。transitionショートハンドの構文は以下の通りです。

transition: transition-property transition-duration transition-timing-function transition-delay;

上記の順序は、トランジションを作成する際に守るべき値の並び順です。

ショートハンドの使い方を例で見てみましょう。先ほどのボタンをtransitionショートハンドで作成するコードは以下の通りです。

<div><p>これはボタンです。</p></div>

div {
	width: 100px;
	height: 100px;
	text-align: center;
	border: solid 3px #33CCFF;
	transition: background-color 2s ease 0.5s;
}

div:hover {
	background-color: #33CCFF;
}

適用されるスタイルは前の例とまったく同じです。唯一の違いは、各サブプロパティを個別の行で列挙する代わりに、transitionショートハンドを使った点だけです。

まとめ

CSSのtransitionプロパティは、スタイル間で発生するトランジションの種類を定義するために使われます。transitionプロパティには、transition-property、transition-delay、transition-timing-function、transition-durationという4つのサブプロパティがあります。これらのサブプロパティを使えば、トランジションの各要素を個別に設定できます。

この記事では、具体例を通じて、transitionプロパティとその4つのサブプロパティを使ってCSSでトランジションを作成する方法を解説しました。これであなたも、プロのWeb開発者のようにCSSトランジションを作り始める準備が整いました！