CSS Transitionの使い方｜簡単にスムーズなアニメーションを実現

別記事で「animation」プロパティを使ったCSSアニメーションの基本を紹介しました。

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

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

turicco.com

「animation」プロパティは@keyframesと組み合わせて複雑なアニメーションを作成できますが、簡単な動きにはやや記述が冗長です。そこでこの記事では「transition」プロパティの使い方を初心者向けに解説します。

「transition」は短いコードでホバーやクリック時の滑らかなアニメーションを実現する便利なプロパティ。実例を交えてわかりやすく紹介するので、ぜひ試してみてください！

実例：マウスオーバーでボックス幅を変更

この違いを実例で体感してください！

About me

この記事を書いた人

はるみです

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

transitionとanimationプロパティの違い

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

以下の表で、両者の特徴をわかりやすく比較します。

• transition：ホバー時の色変化やサイズ変更など、シンプルなアニメーションに最適。
• animation：繰り返し動作や複数ステップの複雑な動きに適している。

animationは多機能ですが、簡単な効果ならtransitionで十分。目的に応じて使い分けましょう！

transitionプロパティの基本構文と詳細設定：使い方と実例でマスター

CSSのtransitionプロパティは、プロパティの変化（例：色、サイズ）を滑らかにする手法です。@keyframes不要で、短いコードでアニメーションを実現します。

基本構文

.element {
  transition: [property] [duration] [timing-function] [delay];
}

• property：変化させるプロパティ（例：width, background-color）。allで全プロパティを対象可。
• duration：変化にかかる時間（例：0.5s, 1s）。
• timing-function：変化の緩急（例：ease, linear, ease-in-out）。
• delay：遅延時間（例：0.2s）。省略可。

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

<div class="box">ホバーしてみて！</div>

.box {
  padding: 1em;
  background-color: lightgray;
  transition: background-color 0.5s ease;
}

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

結果：ホバー時に背景色がグレーから黄色に0.5秒で滑らかに変化。

詳細設定

transitionには以下のサブプロパティがあり、柔軟なアニメーションを可能にします。

ひとつずつ解説します。

transition-property

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

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

.box {
   transition-property: width, 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
  • ユーザーが要素にフォーカスを当てたときに適用される疑似クラスです。フォーム要素やリンクなどに使われます。

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

CSS Transitionの実例で学ぶ｜滑らかなアニメーションの使い方

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

注意ポイント

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

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

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

実例1：背景色の変更

マウスオーバーで背景色をグレーから黄色に変更します。

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

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

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

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

実例2：サイズの変更

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

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

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

.box-2 {
   width: 60%;
   background-color: pink;
 }
.box-2:hover {
   width: 100%;
 }

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

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

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

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

実例4：画像をふわっと浮かせる

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

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

transitionなし

img{
}
img:hover {
  box-shadow: 0 5px 5px rgb(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 rgb(0 0 0 / .3);
}

まとめ

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

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

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

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

turicco.com