HTML/CSS

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

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

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

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

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

動画情報
作成者たにぐち まこと
学習時間9時間
受講者数43,706人
レビュー (9,232件)
動画の詳細はこちら

transitionプロパティとは

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

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

transitionプロパティの使い方

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

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

<div id="container">
  <button>ホバーすると変化するよ!</button>
</div>
#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プロパティ追加してみると、どうなるか結果を確認してみましょう。

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

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

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

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

transition-propertyプロパティ

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

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

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

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

transition-durationプロパティ

transition-durationプロパティは、何秒間かけてアニメーションを実行するか指定します。値には「s(秒)」「ms(ミリ秒)」のいずれの単位を設定します。

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

transition-delayプロパティ

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

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

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

transition-timing-functionプロパティ

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

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

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

下に配置されている「アニメーションボタン」をクリックと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プロパティに一気に設定することができます。

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

まとめ

今回はtransitionプロパティを使ってアニメーションを作成する方法について解説しました。

近年のフロントエンドではアニメーションを実装する機会が多いので、使えるようになると重宝されることは間違いありません。

transitionプロパティは簡易的なアニメーションを作成することに向いていますが、複雑なアニメーションを作成する場合animationと呼ばれる別のプロパティを使って作成します。

animationプロパティの使い方についても別記事で解説しているので、興味のある方はご参考ください。

【CSS】アニメーションの作り方をマスターしよう!本記事ではCSSのanimationプロパティを使ってアニメーションを作成する方法について解説しています。animationプロパティの使い方をマスターすることで、ユーザーに自身のWebサイトを強く印象付けることができるので頑張って習得しましょう!...

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村