【実例多数】CSS Transitionの基本から応用までを解説

（最終更新日：2023年6月）

✔このような方へ向けて書かれた記事となります

「CSSトランジションの機能を理解したい」
「CSSトランジションの実装方法を学びたい」
「CSSトランジションの具体的な例を知りたい」

✔当記事を通じてお伝えすること

• CSSトランジションの基本概念
• CSSトランジションの実装方法と応用例
• CSSトランジションの実践的なデモ

当記事では、CSSトランジションの基本から実践的なデモまで、具体例を交えて詳細に解説しています。

ぜひ最後までお読みいただき、CSSトランジションの魅力に触れてみてください。

CSS Transitionの基本

ここでは、CSS Transitionについて紹介します。

CSS Transitionとその重要性についての理解を深めましょう。

• CSS Transitionとは？
• なぜCSS Transitionが重要なのか？

CSS Transitionとは？

CSS Transitionは、Webページでプロパティの値が変わったときに、その変化に時間をかけて滑らかに描画する機能のことを指します。

アニメーションのような動きを、静的なWebページに導入する方法のひとつです。

たとえば、マウスオーバーでボタンの背景色を変える場合、一瞬で変わるのではなく、数百ミリ秒かけてゆっくりと変化させられます。

.my-button {
  background-color: blue;
  transition: background-color 0.3s ease;
}

.my-button:hover {
  background-color: red;
}

なぜCSS Transitionが重要なのか？

CSS Transitionはユーザ体験を大きく向上させるための重要なツールです。

なぜなら滑らかに変化することで、ユーザはサイトの動きを自然に理解できるようになるからです。

また、アニメーションはユーザの注目を引きやすく、サイトの印象を強化することにも繋がります。

CSS Transitionの設定方法

CSS Transitionを設定する方法について見ていきましょう。

実際に手を動かして、やってみることをおすすめします。

• トランジション可能なプロパティ
• トランジションの定義
• 公式定義と形式文法

トランジション可能なプロパティ

CSS Transitionを利用できるプロパティは主なものとして、以下のようなものがあります。

• width
• height
• opacity
• color

数値や色の値を持つため、その値が変化する時間を変えられます。

トランジションの定義

トランジションは、transitionプロパティを用いて定義します。

このプロパティには4つの値を指定することができ、以下の値を指定します。

• トランジションを適用するプロパティ名
• トランジションの時間
• トランジションの速度曲線
• トランジションの開始遅延

これらの値はスペース区切りで記述します。

.box {
  width: 100px;
  height: 100px;
  background-color: red;
　transition: width 1s ease 0.5s;
}

.box:hover {
  width: 200px;
}

公式定義と形式文法

CSS TransitionはW3Cによって規定されています。

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

それぞれのパートは以下のようになります。

• property：トランジションを適用するプロパティ名
• durationトランジションにかける時間
• timing-function：トランジションの速度曲線
• delay：トランジションが開始するまでの遅延

例はこちらです。

transition: color 1s ease 0.5s;

CSS Transitionを実装する基本的な例

では、CSS Transitionの実装例をいくつか見ていきましょう。

具体例を応用し、自身のWebページに合うように変更するのです。

• シンプルな例
• 複数のアニメーションするプロパティの例
• プロパティ値リストの長さが異なる場合
• メニューのハイライトにトランジションを用いる

シンプルな例

では、まずは最もシンプルな例を見ていきましょう。

ここでは、マウスホバー時にdiv要素の幅を変化させる例を取り上げます。

HTML

<div class="box"></div>

CSS

.box {
  width: 100px;
  height: 100px;
  background-color: skyblue;
  transition: width 0.5s ease-in-out;
}

.box:hover {
  width: 200px;
}

結果

こちらは、.boxにマウスをホバーすると幅が0.5秒かけて200pxに広がる例です。

このときのトランジションはease-in-out関数により、速度が以下のように変化します。

• 始まりと終わりはゆっくり
• 中間は速くなる

複数のアニメーションするプロパティの例

複数のプロパティに対して、アニメーションを適用する例をご覧ください。

マウスホバー時に、div要素の幅と高さ、そして背景色を変化させましょう。

このとき、各プロパティに異なるトランジション時間と速度曲線を指定します。

HTML

<div class="box"></div>

CSS

.box {
  width: 100px;
  height: 100px;
  background-color: skyblue;
  transition: width 0.5s ease-in-out, height 0.3s ease, background-color 1s linear;
}

.box:hover {
  width: 200px;
  height: 200px;
  background-color: coral;
}

この例では、マウスホバー時の動作は以下のようになります。

• 幅：0.5秒かけて200pxに変化
• 高さ：0.3秒かけて200px
• 背景色：1秒かけてcoralに変化

幅、高さ、背景色それぞれに異なる速度曲線が指定されており、その結果、それぞれ異なる動きを見せるトランジションが作成されます。

プロパティ値リストの長さが異なる場合

こちらでは、プロパティ値リストの長さが異なる場合の挙動を見てみましょう。

例えば2つのプロパティに対して、ひとつのdurationを指定した場合、そのdurationは各プロパティに対して適用されます。

.box {
  width: 100px;
  height: 100px;
  background-color: skyblue;
  transition: width, height 0.5s ease-in-out;
}

.box:hover {
  width: 200px;
  height: 200px;
}

widthとheight両方が0.5秒かけて変化します。

メニューのハイライトにトランジションを用いる

メニューバーの項目にマウスをホバーして、背景色を変化させる例を見てみましょう。

HTML

<ul class="menu">
  <li class="menu-item">Home</li>
  <li class="menu-item">About</li>
  <li class="menu-item">Services</li>
  <li class="menu-item">Contact</li>
</ul>

CSS

.menu-item {
  list-style: none;
  display: inline-block;
  padding: 10px 20px;
  transition: background-color 0.3s ease-in-out;
}

.menu-item:hover {
  background-color: skyblue;
}

この例では、メニュー項目にマウスをホバーすると背景色が0.3秒かけてskyblueに変化します。

ease-in-outにより制御され、始まりと終わりはゆっくり、中間は速くなるような動きです。

JavaScriptと組み合わせたCSS Transition

JavaScriptと組み合わせる方法をご覧いただきます。

JavaScriptとCSS Transitionを組み合わせれば、より豊かなアニメーションとユーザインタラクションを実現できるのです。

• JavaScriptの機能をスムーズにするためのトランジション
• トランジションの開始と完了の検出

JavaScriptの機能をスムーズにするためのトランジション

JavaScriptで動的に要素のスタイルを変更すると、滑らかなトランジションが適用できます。

以下は、JavaScriptによるモーダルウィンドウについて、opacityプロパティを用いてウィンドウをフェードインさせる方法です。

HTML

<div id="modal" class="modal"></div>

CSS

.modal {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

JavaScript

document.getElementById('modal').style.opacity = "1";

この例では、JavaScriptでmodalのopacityを1に設定すると、CSSのトランジションによりmodalが0.3秒かけてフェードインします。

トランジションの開始と完了の検出

JavaScriptのtransitionendイベントを用いると、トランジションの完了を検出できます。

トランジションが終了した瞬間に、特定のアクションを起動するなどの、インタラクションを実現できるのです。

HTML

<div id="box" class="box"></div>

CSS

.box {
  width: 100px;
  height: 100px;
  background-color: skyblue;
  transition: width 0.5s ease-in-out;
}

.box:hover {
  width: 200px;
}

JavaScript

document.getElementById('box').addEventListener('transitionend', function() {
  alert('Transition has completed!');
});

この例では、boxの幅が変化し終わった瞬間にアラートが表示されます。

CSS Transitionを活用した洗練されたアニメーションの作成方法

これまでの基本的な知識を元に、CSS Transitionを活用して洗練されたアニメーションを作成してみましょう。

自分で作ってみることで、理解が深まります。

• 複数のプロパティを組み合わせる
• カスタムタイミング関数の作成
• 複数のアニメーションを同時に実行する

複数のプロパティを組み合わせる

CSS Transitionを使って、ひとつの要素に対して複数のプロパティを同時に変化させてみましょう。

同時に変化させることで、洗練されたアニメーションを作れます。

<style>
.element {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 100px;
  height: 100px;
  transform: rotate(0deg);
  opacity: 1;
  background-color: red;
  transition: width 1s, height 1s, top 1s, left 1s, transform 1s, opacity 1s;
}

.element:hover {
  width: 200px;
  height: 200px;
  top: 100px;
  left: 200px;
  transform: rotate(45deg);
  opacity: 0.5;
}
</style>

<div class="element">CSS Transition Animation</div>

要素のサイズや位置、回転、透明度などを同時に変化させることで、ユーザーにとって魅力的な体験を提供できるのです。

カスタムタイミング関数の作成

CSS Transitionでは、cubic-bezier関数を用いてカスタムタイミング関数を作成できます。

アニメーションの速度曲線を細かくコントロールし、動きを自分の好みに調整可能です。

cubic-bezier関数は4つの引数をとり、それぞれ0から1までの値を指定します。

<style>
.element {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: width 1s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.element:hover {
  width: 200px;
}
</style>

<div class="element">Custom Timing Function</div>

複数のアニメーションを同時に実行する

CSS Transitionを用いれば、複数のアニメーションを同時に実行することも可能です。

同時に実行することで、コンプレックスなアニメーションを作れます。

<style>
.box1, .box2 {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: width 1s, height 1s;
}

.box1:hover {
  width: 200px;
}

.box2:hover {
  height: 200px;
}
</style>

<div class="box1"></div>
<div class="box2"></div>

異なる要素に対して同時にトランジションを適用したり、同じ要素の異なるプロパティに対して同時にトランジションを適用したりしています。

まとめ

当記事では、以下を解説してきました。

• CSS Transitionの基本的な概念
• CSS Transitionの具体的な実装例
• JavaScriptとの組み合わせ方
• アニメーションの作成方法

CSS Transitionはウェブページに動きを加えるための強力なツールであり、上手に活用することでユーザー体験を大幅に向上させられます。

それぞれの要素に適切なトランジションを適用することで、サイトの視覚的な魅力を最大限に引き出せるのです。

CSS Transitionの全ての機能を十分に理解して、洗練された動的なウェブサイト作りを実現しましょう。