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

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

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

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

turicco.com

animationプロパティでは@keyframesとanimationプロパティの２つを設定する必要があり、複雑なアニメーションに対応できる反面、簡単なアニメーションを実装するには少し冗長です。

もっと手軽なCSSアニメーション向けなのが、当記事で紹介するtransitionプロパティ。この記事では、transitionプロパティの基本的な使い方を解説します。

マウスオーバーやクリックした際の動きを、一瞬の変化ではなく滑らかにできますよ。

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

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

この記事を書いた人

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

はっちゃん
です

transitionとanimationプロパティの違い

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

違いを一言で

• transition: hoverなどの擬似クラスに対する滑らかなアニメーション効果をつける。
• animation: 自動再生や繰り返し等の細かい設定が必要なアニメーションを作る。

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

transitionプロパティの基本構文

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

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

セレクタ（.selector部分、どの要素に適用するか）はアニメーションを適用する要素に合わせてください。

セレクタの調べ方を知りたい方はこちらの記事で解説しています。

ChromeデベロッパーツールでCSSセレクタ（クラスやID）を調べる方法

このような方向けの記事です CSSを使ったカスタマイズに興味がある 初心者でHTMLとCSSについての基本を知りたい デベロッパーツールの使い方を知っておきたい 「デベロッパーツールを使えないとCSSは書けません」と断言できるほど、ウェブデ...

turicco.com

transitionプロパティの詳細設定

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

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

ひとつずつ解説します。

transition-property

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

• プロパティを特定しない場合は省略しても大丈夫です。
• 「all」を指定するとプロパティすべてが対象になります。

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

transition-duration

アニメーションの所要時間を設定します。値は秒（s）またはミリ秒（ms）で指定します。このtransition-durationの記述がないと動きは滑らかにはならないため必須です。

.box {
  transition-duration: 1s;
}

transition-timing-function

アニメーションの進行速度を制御します。指定しない場合は初期値のeaseが適応されます。

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

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

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

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

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プロパティの基本的な使い方をみていきましょう。

背景色の変更

マウスオーバー時（:hover）に背景色が変わる簡単な例です。この例では、.box-1クラスの要素に対して、マウスオーバー時に背景色がグレーから黄色に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;
}

アニメーションなしの場合にはマウスオーバーした瞬間に一瞬で背景色が変わっているのが分かります。アニメーションをつけた滑らかな変化の方が心地よく感じるのではないでしょうか。

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

transition-propertyは指定不要

ちなみに、アニメーション対象のCSSプロパティ（background-color）を指定しなくても同様に動作します。このプロパティを省略する、もしくは「all」を指定するとプロパティすべてが対象になります。

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

背景色を変更するときにtransition: all 0.5s easeよく使っています！

サイズの変更

次に、マウスオーバー時（:hover）にサイズが変わる例です。この例では、.box-2クラスの要素に対して、マウスオーバー時に幅が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;
 }

複数のプロパティの変更

複数のプロパティを同時に変更する例です。この例では、.box-3クラスの要素に対して、マウスオーバー時に幅が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;
}

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

まとめ

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

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

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

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

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

turicco.com