デザインやカスタマイズを依頼するなら ココナラ

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

アイキャッチ/cssアニメーション カスタマイズ
カスタマイズ
記事内に広告が含まれています
スポンサーリンク

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


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

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

マウスオーバークリックした際の動きを滑らかにできますよ。

\いつものボタンの動きにも使っています/
スポンサーリンク
この記事を書いた人
  • ブログ好きな40代主婦
  • CocoonサイトをCSSでカスタマイズ
  • JavaScriptを勉強中
  • ドメインパワー35
  • ワードプレスで複数サイトを運営しています
はっちゃん
です
プロフィール

transitionとanimationプロパティの違い

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

animationtransition
特徴複雑で連続的な動きを作る。状態の変化を滑らかにする。
動作のきっかけ自動再生(CSSクラスやJavaScriptのクラス追加によって開始される)トリガーが必要(hoverやactiveなどユーザーの操作
設定方法@keyframesでアニメーションのステップを定義し、それを要素に適用する。@keyframesの設定が必要ない。
緩急設定  
遅延設定  
再生回数設定 (1回のみ再生)
ループ  
アニメーション方向  
ボールが左右に動くアニメーションなど、複雑なアニメーションに適している。マウスオーバー時にボタンの色が変わるなど、シンプルで簡単なアニメーションに適している。

違いを一言で

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

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

スポンサーリンク

transitionプロパティの基本構文

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

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

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

セレクタの調べ方が分からない方はこちらを参考にどうぞ。

スポンサーリンク

transitionプロパティの詳細設定

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

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

プロパティ名説明
transition-propertyアニメーションを適用する対象のプロパティを定義する
transition-durationアニメーションの時間を定義する
transition-delayアニメーションを開始するタイミングを定義する
transition-timing-functionアニメーション変化の度合を定義する

ひとつずつ解説します。

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-inout

transition-delay

アニメーションが開始されるまでの遅延時間を設定します。値は秒(s)またはミリ秒(ms)で指定します。

.box {
  transition-delay: 0.5s;
}
スポンサーリンク

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

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

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

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

スポンサーリンク

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

背景色の変更

マウスオーバー時(:hover)に背景色が変わる簡単な例です。この例では、.box-1クラスの要素に対して、マウスオーバー時に背景色がグレーから黄色に0.5秒かけて変わります。

比較用にアニメーション(transition)なしとありを掲載します。

\実際にマウスのせてみてね/

transitionなし

box-1(アニメーションなし)

 <div class="box-1"></div>
.box-1 {
	background-color: lightgray;
}
.box-1:hover {
	background-color: yellow;
}

transitionあり

box-1

 <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秒かけて変わります。

\実際にマウスのせてみてね/

transitionなし

box-2

 <div class="box-2"></div>
.box-2 {
      width: 100px;
      background-color: pink;
    }
.box-2:hover {
      width: 300px;
    }

transitionあり

box-2

 <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秒かけて変わります。

\実際にマウスのせてみてね/

transitionなし

box-3

 <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;
}

transitionあり

box-3

 <div class="box-3"></div>
.box-3 {
	width: 100px;
	background-color: yellow;
}
.box-3:hover {
	width: 300px;
	background-color: lightblue;
}

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

まとめ

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

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

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

Comment

タイトルとURLをコピーしました