こんにちは。
最近はCSSだけでもいろいろなことが実現できるようになり、従来のJavaScriptしかできなかったことの一部がCSSでも実現できるようになりました。
そのなかでも代表的なのがCSSの動的な変更です。
皆さんはCSS3の 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 | トランジションの開始を遅らせるためのプロパティ。 |
対応ブラウザ
対応ブラウザは以下の通りです。
| 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
