transitionでアニメーション効果を付ける

transitionプロパティとは

CSSには、HTML要素の状態変化をアニメーション表示させることができる「transition(トランジション)」というプロパティがあります。 transitionは主に「:hover」や「:focus」などの疑似クラスを指定する際に使います。

まずは簡単な例で、どんな効果が得られるのかを確認してみましょう。

transitionの例

リンク部分にカーソルを重ねた時に、文字色を変えます。

:hoverで文字色を赤とだけ指定した場合、表示は下記のようになります。 パソコンから読まれている方は、カーソルを重ねてみてください。 :hoverに文字色のみ指定

html

<a href="#" class="hover-red">:hoverに文字色のみ指定</a>

css

a.hover-red:hover{
  color: red;
}

これにtransitionプロパティを加えた設定が以下のリンク文字です。 先程よりも文字色が変わるのに時間がかかることがわかります。

↓カーソルを重ねてみてください。 transitionを設定したリンク

css

a.hover-red:hover{
  color: red;
  transition: 2s; /* 2s=2秒かけて変化させる */
}

このように、transitionプロパティを使うことで、ある要素に変化が起こる場合に「どういったタイミングで変化させるか」を設定することができます。 上の例では文字色 color を2秒かけて変化させる設定しました。

transitionは他のCSSプロパティに対しても適用させることができますし、変化するタイミングなどを指定することもできます。 これにより、多彩な動きをCSSのみで表現することが出来るのです。

CSS トランジションは、アニメーションを開始する場合 (遅延を設定することで)、トランジションをどの程度持続するか (持続時間を設定することによって)、およびトランジションをどのように実行するか (タイミング関数を定義することによって、例えば、直線的または最初は速く、最後に遅くなど) を、 (明示的にリストすることによって) アニメーションするためのプロパティを決定させます。 引用元：CSS トランジションの使用-MDN

transitionプロパティを知ろう

transitionプロパティは、下記4つのtransition効果（時間的変化）の一括指定プロパティです。

複数のtransition効果を指定する場合は、backgroundやflexの値と同じように半角スペースで区切って記述します。

指定していないプロパティは初期値が適用されます。 “transitionの例”で書いた「transition: 2s;」はtransition-durationの値のみを記述していますが、実際には「transition: all 2s ease 0s;」の動きをしているわけです。

なお、トランジション効果の加速曲線を設定する「transition-timing-function」ではeaseやlinearなど予め設定されている値だけではなく、任意のタイミング関数を指定することもできます。詳細についてはMDN - transition-timing-functionをご確認下さい。

transitionを使ってみよう

transitionプロパティは装飾によく使われています。 Webサイトでよく見かける、transitionプロパティを使用した効果を作ってみましょう。

マウスオーバー時の色変化

最初に作成した文字色と同じように、背景色やボーター色などもtransition効果を設定することができます。所要時間を0よりも多く設定することで、ふんわりと色が変わります。 瞬時に切り替わるよりもリッチに見えますね。

画像にマウスオーバーすると白っぽく

ブログのアイキャッチ・商品一覧のサムネイルなど、画像がリンクになっていることを示すためにマウスオーバーで色味を変化させているサイトも多いです。

瞬時に変わるのと、変化時間をつけた場合とでは印象が違いますね。

上記例では簡単に、opacityプロパティを使って画像を明るくなったように見せています。

html

<img src="img/fish01.jpg" width="320" height="auto" alt="" class="img-hoverred">
<img src="img/fish01.jpg" width="320" height="auto" alt="" class="img-hoverred img-transition">

css

.img-hoverred:hover{
  opacity: .7;
}
.img-transition{
  transition:1.2s ease-in-out;
}

選択したテキストエリアをハイライト

フォームで選択中（入力カーソル表示部分）のテキストエリアは「:focus」という疑似クラスを使用してスタイルを指定します。 こうした場合にもtransitionを使用することで、変化を柔らかく見せることができます。

ちなみに、Bootstrapのフォームもtransitionプロパティが使われています。

デモでは分かりやすいように大胆な設定をしています。 上図のBootstrapのようにtransitionの時間を短くすると、さり気なく滑らかな変化になり違和感なく馴染みやすいですね。

実習

ポートフォリオサイト（index.html）の「SERVICES」セクション部分、 下図のようにアイコンにマウスカーソルを重ねると色が変わるように設定してみましょう。 ホバー時の色・変化時間などは、お好きに設定して頂いても良いです。

使用するのはstyle.cssのみです。 例のように変更する場合、記述が必要なCSSプロパティは下記４つ。

• transition
• background
• box-shadow
• color

※注意点 .ico-circle は「SERVICES」セクション以外でも使用しています。 他のセクションには影響しないようにスタイルを指定して下さい。

実習ファイルについて

実習の解答となるスタイル指定は「exercise.css」に記載しています。 下記手順で解答ファイルを確認して下さい。

1. 素材タブ > レッスンの素材一覧 からexercise.cssをダウンロード
2. 作成中のサイト内、cssフォルダにexercise.cssを移動する（上書き）
3. htmlファイルのコメントアウトを外し、exercise.cssを読み込ませる