未経験からエンジニアになりたい人必見!
おすすめプログラミングスクール3選!

【CSS】transitionプロパティの使い方

本記事ではCSSのtransitionプロパティの使い方について解説しています。

transitionプロパティは実務でも非常によく使うプロパティの一つです。使えるようになると様々なアニメーションを作成することができるようになるので、頑張って習得しましょう!

HTML/CSSの学習におすすめ参考書
1冊ですべて身につくHTML&CSSとWebデザイン入門講座

参考書が苦手な人はUdemyの動画がおすすめ
ちゃんと学ぶ、HTML+CSS&JavaScript入門講座

作成者たにぐち まこと
学習時間9時間
受講者数42,075人
レビュー (8,925件)

transitionプロパティとは

transitionとは、簡易的なアニメーションを作成する時に使われるプロパティです。Webサイトでよく見かけるボタンをホバーした時に色が変化したり、横から要素がスライドさせたりすることができます。

transitionプロパティは設定がとてもシンプルなため、初心者の方でも簡単に使うことができ便利ですがanimationプロパティのように詳細な設定をすることができません。

transitionプロパティの使い方

transitionプロパティの使い方について見ていきましょう。

まず始めにtransitionプロパティを使わずに、ボタンをホバーした時に文字の色と背景色を変更する結果を確認してみましょう。

HTML
<div id="container">
  <button>ホバーすると変化するよ!</button>
</div>
CSS
#container{
  text-align:center;
  margin-top:100px;
}

button{
  padding:10px 30px;
  background:#fff;
  border:1px solid #000;
  color:#000;
}

button:hover{
  background:#000;
  color:#fff;
}

一瞬で文字の色と背景色が変更されてしまっていますね。

続いて同じコードにtransitionプロパティ追加してみると、どうなるか結果を確認してみましょう。

CSS
button{
  transition:all .5s; /* transitionを追記 */
}

文字の色と背景色がゆっくり切り替わっているのが分かります。このようにtransitionプロパティを使うことで、本来一瞬で切り替わってしまうものに対してアニメーションを付けることができます。

それぞれの機能に分けて値を設定する

transitionプロパティには4つの値を設定することができます。

transition-propertyプロパティ

transition-propertyプロパティは、どのプロパティを変化するのかを指定することができます。

例えばwidthとheightを変化させたい時に、widthは一瞬で変化してもいいけどheightをゆっくり変化させたい時などにtransition-property:heightと設定することで、heightのみを対象にします。

全てのプロパティを対象にしたい場合は、allと記述します。

CSS
transition-property:height; /* heightプロパティのみ対象 */
transition-property:all;  /* 全てのプロパティを対象 */

▼実行結果

transition-durationプロパティ

transition-durationプロパティは、何秒間かけてアニメーションを実行するか指定します。

値には「s(秒)」「ms(ミリ秒)」のいずれの単位を設定します。

CSS
transition-duration:1s; /* 1秒 */
transition-duration:300ms; /* 300ミリ秒(0.3秒) */

transition-delayプロパティ

transition-delayプロパティは、アニメーションの開始時間を遅らせることができます。

例えば、ボタンをホバーした時にすぐにアニメーションを実行させるのではなく1秒経過してから開始させたい場合に使います。単位はtransition-durationプロパティと同様に「s」「ms」です。

CSS
transition-delay:1s; /* 1秒後にアニメーションを開始 */
transition-delay:300ms; /* 300ミリ秒(0.3秒)後にアニメーションを開始 */

transition-timing-functionプロパティ

transition-timing-functionプロパティは、アニメーションがどのように変化するか指定することができます。

transition-timing-functionプロパティに指定することができる値は以下のとおりです。

説明
ease【初期値】開始時と終了時をゆっくり変化
ease-in開始時はゆっくりで終了時に早く変化
ease-out開始時は早く終了時にゆっくり変化
ease-in-outeaseより開始時と終了時をゆっくり変化
linear開始から終了まで一定の速度で変化
cubic-bezier(x軸の値, y軸の値, x軸の値, y軸の値)数値で細かく指定
transition-timing-functionプロパティに設定できる値

下に配置されている「アニメーションボタン」をクリックとtransition-timing-functionプロパティに設定できる値がどのように変化していくのかが視覚的に分かります。

ease
ease-in
ease-out
ease-in-out
linear

cubic-bezier()でアニメーションの変化を指定したい場合は、Easing Functions Cheat Sheetがオススメです。おそらく実装したい変化もここに掲載されています。

1行にまとめて値を設定する

先ほど紹介した、「transition-property」「transition-duration」「transition-delay」「transition-timing-function」の4つをバラバラに記述すると手間がかかりますよね。この4つの値はtransitionプロパティに一気に設定することができます。

CSS
transition: transition-propertyの値 transition-durationの値 transition-delayの値 transition-timing-functionの値;