【CSS】transitionとは?animationとの違いを解説!!

こんにちは。

最近はCSSだけでもいろいろなことが実現できるようになり、従来のJavaScriptしかできなかったことの一部がCSSでも実現できるようになりました。

そのなかでも代表的なのがCSSの動的な変更です。

皆さんはCSS3の transition や animation といった言葉は聞いたことがありますでしょうか?どちらも役割が似ているため、違いを理解していない人も多いのではないかと思います。

 実際 transition と animation って何が違うの?

そんなお悩みにお答えするため、今回はtransitionプロパティ

・基本的な使い方
・アニメーションとの違い

について解説します!

transitionとは

そもそもCSS3のトランジションとは?

transitionプロパティの説明に入る前に、まず初めにトランジションとは何かを説明します。

例えば、セレクタの :hover を使って表示を変更すると、その表示は瞬時に切り替わります。

それを連続した動きで滑らかに変化させるのがCSS3のトランジションになります。

トランジションはある状態からそれとは別の状態へという2点間の変化を実現することができます。

transitionの読み方

transitionは「トランジション」と読みます。

transitionは日本語で「遷移」を意味しますが、プロパティの意味もそれに似ており、指定したCSSプロパティの動的な遷移を実装するためのプロパティとなります。

transitionはトランジション関連のプロパティをまとめて指定できるプロパティ

transitionプロパティの用途を具体的にいうと、

トランジション関連のプロパティをまとめて指定できるプロパティ

です。

トランジションに関連したプロパティは複数あるのですが、transitionプロパティはそれらを一括で設定できる便利なプロパティになります。

transitionで利用できる値

transitionプロパティでは空白区切り、かつ順不同で以下の値を使うことができます。

説明
 transition-property 「どのプロパティ」の値が変更された時にトランジションを実行させるのかを設定するプロパティ。
 transition-duration  どれだけの時間をかけて変化させるのかを設定するプロパティ。
 transition-timing-function トランジションの再生速度の変化パターンを設定するプロパティ。
 transition-delay  トランジションの開始を遅らせるためのプロパティ。
注意
時間を表す値については、1つ目にtransition-duration、2つ目にtransition-delayだと認識されます。

対応ブラウザ

対応ブラウザは以下の通りです。

PC用ブラウザ 対応状況
Chrome 完全対応
Edge 完全対応
Firefox 完全対応
Internet Explorer 完全対応
Opera 完全対応
Safari 完全対応
スマートフォン用ブラウザ 対応状況
Android webview 完全対応
Android版Chrome 完全対応
Android版Firefox 完全対応
Android 版 Opera 完全対応
iOS版Safari 完全対応
Samsung Internet 完全対応

transitionの基本的な使い方

ここでは実際にtransitionプロパティを使って簡単なトランジションを実装したサンプルコードと一緒に、使い方を手順を追って解説していきます。

トランジションさせるHTML要素、CSSを用意する

まずはトランジションさせるHTML要素とCSSを用意しましょう。

今回は赤い円を表示させます。

See the Pen
transition–1
by ryuga (@ryuga)
on CodePen.

トランジション後の状態を記述する

次に、トランジションで変更するCSS、つまり遷移後の状態を記述します。

今回は :hover セレクタを使って、赤い円をホバーしたあとに背景色を青色にするトランジションを実行させる例を紹介します。

See the Pen
transition–2
by ryuga (@ryuga)
on CodePen.

transitionプロパティを記述する

最後にトランジションを実行するためのtransitionプロパティを記述していきます。

今回は背景色を2秒かけてゆっくりと変化させていきます。

See the Pen
transition–3
by ryuga (@ryuga)
on CodePen.

transitionプロパティに指定した1番目の値は transition-property になります。今回は背景色を変化させたいので background-color を指定します。

2番目に指定した値は transition-duration です。2秒かけて変化させたいため、2s と記述します。

これで赤い円をホバーすると、背景色がゆっくりと青色になると思います。

transitionプロパティはこのように2点間の遷移を滑らかに行うことができます。

CSS3のアニメーションとの違い

トランジションは2点間の遷移を滑らかにするものでしたが、アニメーションとの違いはなんでしょうか?

アニメーションはトランジションを連続して行うような、次から次へと別の状態に変化させることができるという違いがあります。

サンプルコードをみていきましょう。

See the Pen
transition–4
by ryuga (@ryuga)
on CodePen.

トランジションでは背景色を赤→青の2点間しか変化させることができませんでしたが、アニメーションではこのように赤→黄→緑→青→紫というように連続で別々の状態へと滑らかに変化させることができます。

アニメーションはトランジションを連続で実行するためのものと覚えておきましょう!

まとめ

いかがでしょうか?

今回はtransitionプロパティの基本的な使い方からアニメーションとの違いまでを解説していきました。

ついこの前までは対応していないブラウザもあるぐらいのまだ比較的新しいCSSプロパティでしたが、今ではほぼ全てのブラウザが対応するぐらいには普及しました。

今後もさらに使用頻度が増す見込みのあるCSSプロパティですので、ぜひ使い方をマスターしておきましょう!

参考文献:http://www.htmq.com/css3/transition.shtml

プログラミング学習に迷ったら相談してみよう!
無料でカウンセリングを受けてみる
※売り込みは一切致しません プログラミングスクール無料カウンセリング