お問い合わせ
お問い合わせ
ホーム > CSS > CSS transitionとは？基本と使い方を解説

CSS transitionとは？基本と使い方を解説

CSS
CSS transitionによる滑らかなアニメーションを表現した青系のモダンなイラスト
ボタンやカード、図形が滑らかに変形・移動する様子を表現した、CSS transitionの基本と使い方をイメージしたビジュアル。

CSSでアニメーションを実装する方法のひとつに、transitionがあります。

transitionを使うと、要素の色や大きさ、位置などを滑らかに変化させることができ、ボタンのホバー時やメニューの表示など、さまざまな場面で活用されています。

この記事では、CSS transitionの基本から使い方、よく使うプロパティ、実践例までをわかりやすく解説します。

CSS transitionとは

CSS transitionとは、CSSプロパティの変化を一定時間かけて滑らかに変化させる機能です。

例えば、マウスを乗せた瞬間にボタンの色が切り替わるのではなく、0.3秒かけて徐々に変化させることができます。

transitionを使うことで、サイトに自然な動きを加えられます。

transitionを使わない場合

button {
  background-color: #3498db;
}

button:hover {
  background-color: #e74c3c;
}

ホバーした瞬間に色が切り替わります。

transitionを使った場合

button {
  background-color: #3498db;
  transition: background-color 0.3s;
}

button:hover {
  background-color: #e74c3c;
}

0.3秒かけて滑らかに色が変化します。

transitionの基本構文

transitionの基本構文は以下の通りです。

transition: プロパティ 時間;

例です。

.box {
  transition: background-color 0.5s;
}

この場合、background-colorの変化が0.5秒かけて行われます。

transitionを構成する4つのプロパティ

transitionは以下の4つの要素で構成されています。

  • transition-property
  • transition-duration
  • transition-timing-function
  • transition-delay

まとめて記述することもできます。

transition: background-color 0.3s ease 0s;

transition-property

変化させるプロパティを指定します。

.box {
  transition-property: background-color;
}

複数指定することも可能です。

.box {
  transition-property: background-color, width;
}

すべての変化を対象にする場合はallを指定します。

.box {
  transition-property: all;
}

ただし、不要なプロパティまでアニメーション対象になるため、必要なものだけ指定する方が管理しやすくなります。

transition-duration

変化にかかる時間を指定します。

.box {
  transition-duration: 0.5s;
}

1秒なら以下のように記述します。

.box {
  transition-duration: 1s;
}

単位は秒を表す秒(s)またはミリ秒を表すmsです。

transition-timing-function

変化の速度を指定します。

linear

一定速度で変化します。

.box {
  transition-timing-function: linear;
}

ease

最初と最後がゆっくりになり、途中が速くなります。

.box {
  transition-timing-function: ease;
}

ease-in

ゆっくり始まります。

.box {
  transition-timing-function: ease-in;
}

ease-out

最後に向かってゆっくりになります。

.box {
  transition-timing-function: ease-out;
}

ease-in-out

最初と最後がゆっくりになります。

.box {
  transition-timing-function: ease-in-out;
}

transition-delay

アニメーション開始までの待ち時間を指定します。

.box {
  transition-delay: 0.5s;
}

0.5秒後に変化が始まります。

まとめて記述する方法

一般的には、省略形でまとめて記述します。

.box {
  transition: background-color 0.3s ease;
}

複数のプロパティを指定することも可能です。

.box {
  transition: background-color 0.3s ease,
              transform 0.3s ease;
}

よく使うtransitionの実例

ボタンの色を変える

<button class="button">送信</button>
.button {
  background-color: #3498db;
  color: #fff;
  padding: 12px 24px;
  border: none;
  transition: background-color 0.3s;
}

.button:hover {
  background-color: #2980b9;
}

拡大するボタンを作る

<button class="button">送信</button>
.button {
  padding: 12px 24px;
  transition: transform 0.3s;
}

.button:hover {
  transform: scale(1.1);
}

transformについて詳しく知りたい場合は、「CSS transformとは？translate・scale・rotateの使い方を解説」も参考になります。

画像を少し拡大する

<div class="image">
  <img src="image.jpg" alt="">
</div>
.image {
  overflow: hidden;
}

.image img {
  width: 100%;
  transition: transform 0.3s;
}

.image img:hover {
  transform: scale(1.05);
}

スムーズに透明度を変える

<div class="box"></div>
.box {
  width: 200px;
  height: 200px;
  background-color: #3498db;
  opacity: 1;
  transition: opacity 0.3s;
}

.box:hover {
  opacity: 0.5;
}

transitionでアニメーションできる主なプロパティ

よく利用されるものは次の通りです。

  • color
  • background-color
  • opacity
  • width
  • height
  • margin
  • padding
  • border-radius
  • transform

一方で、displayのようにアニメーションできないプロパティもあります。

display: none;
display: block;

この切り替えはtransitionでは滑らかに変化しません。

transitionとanimationの違い

項目transitionanimation
発動条件状態の変化自動再生可能
繰り返し基本的にしない可能
複雑な動き不向き得意
記述量少ない多い

ボタンのホバーやメニュー表示などの簡単な動きにはtransitionが向いています。

複雑なアニメーションを作りたい場合は、「CSSアニメーションの基本と使い方を解説」が参考になります。

transitionを使う際の注意点

allの多用は避ける

transition: all 0.3s;

便利ですが、意図しないプロパティまでアニメーション対象になることがあります。

必要なプロパティのみ指定する方が保守しやすくなります。

durationがないと動かない

以下はアニメーションが発生しません。

.box {
  transition: background-color;
}

時間を指定する必要があります。

.box {
  transition: background-color 0.3s;
}

displayには使えない

要素の表示・非表示には、opacityやheightを組み合わせる方法がよく利用されます。

まとめ

CSS transitionは、プロパティの変化を滑らかにするための機能です。

基本的な構成は次の4つです。

  • transition-property
  • transition-duration
  • transition-timing-function
  • transition-delay

ボタンや画像、メニューなどに自然な動きを加えることで、見やすく操作しやすいWebサイトを作れます。

まずは、背景色や拡大縮小など簡単なアニメーションから試してみると、transitionの仕組みを理解しやすくなります。

関連記事