マウスオーバーで滑らかな動きをつける！シンプルなCSSアニメーション「transition」プロパティの使い方

別記事で「animation」プロパティを使ったCSSアニメーションについてご紹介しました。

サイトに「動き」をつけるCSSアニメーション／基本的な指定方法を覚えよう

この記事では、CSSアニメーションの基本的な指定方法やプロパティの使い方について解説します。サイトに「動き」といえばJavascriptが必要？というイメージがあるかもしれませんが、アニメーションを使うことでCSSでもウェブページに動きをつ...

turicco.com

「animation」プロパティでは@keyframesとanimationプロパティの２つを設定する必要があり、複雑なアニメーションに対応できる反面、簡単なアニメーションを実装するには少し冗長です。もっと手軽なCSSアニメーション向けなのが、当記事で紹介する「transition」プロパティ。

「transition」は、短いコードでホバーアクションやクリックアクションなどを滑らかに表現できる便利なプロパティです。初心者の方にもわかりやすく説明しているので、ぜひお試しください！

例えばマウスオーバー時にボックス幅を広くする場合

滑らかな変化が一目瞭然ですね！

この記事を書いた人

• ブログ好きな40代主婦
• CocoonサイトをCSSでカスタマイズ
• 2020年1月1日ブログ開設
• ドメインパワー40
• 2023年～有料記事公開
  • →累計300件（月間約20件）購入いただきました

はっちゃん
です

transitionとanimationプロパティの違い

CSSには、2つの主要なアニメーション手法があります。「animation」と「transition」は、どちらもウェブページにアニメーション効果を追加するために使われますが、それぞれ異なる特性と用途があります。

• transition: 簡単なアニメーション（ホバー時の色変化やサイズ変更など）に最適。
• animation: 繰り返し動作や複雑なステップが必要な場合に活用。

できることが多い「animation」が万能というわけではなく、簡単なアニメーション効果は「transition」で十分です。どちらも便利なツールなので目的に合わせて使い分けましょう。

transitionプロパティの基本構文

「transition」プロパティでは@keyframesの設定が不要のため、記述はこの基本構文のみです。

.selector {
  transition: property duration timing-function delay;
}

例: 背景色を0.5秒で滑らかに変更

.box {
  background-color: lightgray;
  transition: background-color 0.5s ease;
}
.box:hover {
  background-color: yellow;
}

transitionプロパティの詳細設定

CSSの「transition」プロパティには詳細な設定をおこなうためのサブプロパティがいくつかあります。これらを指定することでより柔軟なアニメーションを実現できます。

以下に、各サブプロパティの詳細と使用例を紹介します。

ひとつずつ解説します。

transition-property

アニメーションの対象となるCSSプロパティを指定します。特定のプロパティをアニメーションさせたい場合に使います。

• all: すべてのプロパティに適用されます
• 特定のプロパティ（例: background-color）を指定します
  • →プロパティを特定しない場合は省略可能

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

transition-duration

アニメーションの所要時間を設定します。

• 値は秒（s）またはミリ秒（ms）で指定します
• このtransition-durationの記述がないと動きは滑らかにはならないため必須です

.box {
  transition-duration: 1s;
}

transition-timing-function

アニメーションの進行速度を制御します。

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

以下の値がよく使われます。

• ease: ゆっくり始まり、途中で速くなり、最後にまたゆっくりになる
• linear: 一定速度で変化
• ease-in: ゆっくり始まり、途中から速くなる
• ease-out: 速く始まり、途中からゆっくりになる
• ease-in-out: ゆっくり始まり、途中で速くなり、最後にまたゆっくりになる

※指定しない場合は初期値のeaseが適応されます。

アニメーションの進行速度の違いを、実際の動作で比べてみてくださいね。

transition-timing-functionの実際の動作

ease

linear

ease-in

ease-out

ease-in–out

transition-delay

アニメーションが開始されるまでの遅延時間を設定します。

• 値は秒（s）またはミリ秒（ms）で指定します
  • →遅延しないときは省略可能

.box {
  transition-delay: 0.5s;
}

transitionアニメーションの動作のきっかけ（トリガー）となる疑似クラス

CSSの「transition」プロパティは、特定のイベントや条件が発生したときにスタイルの変化をスムーズにアニメーションとして表示するために使用されます。その変化を引き起こすトリガーとなるのが「疑似クラス」です。以下に、主な疑似クラスとその動作を紹介します。

• :hover
  • ユーザーが要素にマウスポインターを乗せたときに適用される疑似クラスです。一般的にボタンやリンクのスタイル変更に使われます。
• :active
  • ユーザーが要素をクリックしている（マウスボタンを押している）間に適用される疑似クラスです。クリック中の視覚フィードバックとして使用されます。
• :checked
  • チェックボックスやラジオボタンがチェックされたときに適用される疑似クラスです。フォーム要素のスタイル変更に使われます。
• :focus
  • ユーザーが要素にフォーカスを当てたときに適用される疑似クラスです。フォーム要素やリンクなどに使われます。

他にもなど、特定の子要素にスタイルを適用する疑似クラスがあります。これらもプロパティと組み合わせて使うことができます。

transitionプロパティの基本的な使い方

ここでは、具体的な例を通じて「transition」プロパティの基本的な使い方を学びましょう。

注意ポイント

「transition」プロパティは通常アニメーションさせたい要素自身に指定します。親要素ではなく、具体的に動きを持たせたいプロパティを設定する要素へ直接記述するのが基本です。

• 親要素に指定する場合、transitionは親要素に適用されるプロパティの変化に対してのみ動作します。例えば、子要素の動きや見た目には直接影響しません。
• 子要素に個別指定したい場合、親要素ではなくそれぞれの要素に適切なtransitionを記述してください。

以下に、transitionの効果を比較するために「なし」と「あり」の例を示します。

背景色の変更

マウスオーバー（:hover）時に背景色が変わる簡単な例です。この例では、背景色がグレーから黄色に0.5秒かけて滑らかに変化します。

＼実際にマウスをのせてみてね／

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

.box-1 {
  background-color: lightgray;
}
.box-1:hover {
  background-color: yellow;
}

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

.box-1 {
  background-color: lightgray;
  transition: background-color 0.5s ease;
}
.box-1:hover {
  background-color: yellow;
}

マウスオーバー時に一瞬で背景色が変わる「なし」の場合と比べ、「あり」の場合は滑らかな変化が心地よく感じられます。

比較するとアニメーション効果が一目瞭然だね！！

サイズの変更

次に、マウスオーバー時に要素の幅を変える例です。以下の例では、幅が100pxから300pxに1秒かけて変わります。

＼実際にマウスをのせてみてね／

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

.box-2 {
   width: 100px;
   background-color: pink;
 }
.box-2:hover {
   width: 300px;
 }

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

.box-2 {
  width: 100px;
  background-color: pink;
  transition: width 1s ease-in-out;
 }
.box-2:hover {
   width: 300px;
 }

transitionを使うことで、スムーズな変化を実現できます。

複数のプロパティの変更

複数のプロパティを同時に変更する例です。この例では、マウスオーバー時に幅が100pxから300pxに1秒かけて、背景色が黄色から水色に0.5秒かけて変わります。

＼実際にマウスをのせてみてね／

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

.box-3 {
  width: 100px;
  background-color: yellow;
}
.box-3:hover {
  width: 300px;
  background-color: lightblue;
}

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

.box-3 {
  width: 100px;
  background-color: yellow;
  transition: width 1s, background-color 0.5s;
}
.box-3:hover {
  width: 300px;
  background-color: lightblue;
}

要素ごとに一回分の動作時間を変えて、それぞれがぬるーっと動くのがいいね！

画像をふわっと浮かせる

マウスオーバー時（:hover）に画像をふわっと浮き上がるような効果を追加します。この例では、img要素に対してマウスオーバー時にY方向（縦）に-5px移動して浮かせ、影をつけてふわっと見えるようにしています。

＼実際にマウスをのせてみてね／

transitionなし

img{
}
img:hover {
  box-shadow: 0 5px 5px rgba(0,0,0,0.3);
  transform: translateY(-5px);
}

transitionあり

img {
  transition: all 0.5s;/* 0.5秒でゆるやかに変化 */
}
img:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 5px rgba(0,0,0,0.3);
}

まとめ

今回はCSSアニメーションの「transition」プロパティについて紹介しました。

「transition」プロパティを使うとシンプルなコードで滑らかな動きを実現できるのでホバーアクションを追加する際などにぜひ使ってみてください。

より細かなアニメーションを追加したい場合は「animation」プロパティを使用します。この記事の例を参考にして、ウェブサイトに動きを加えてみましょう。

サイトに「動き」をつけるCSSアニメーション／基本的な指定方法を覚えよう

この記事では、CSSアニメーションの基本的な指定方法やプロパティの使い方について解説します。サイトに「動き」といえばJavascriptが必要？というイメージがあるかもしれませんが、アニメーションを使うことでCSSでもウェブページに動きをつ...

turicco.com