【CSS】transition-propertyプロパティの使用方法を徹底解説!!

こんにちは。

皆さんはCSS3のトランジションという技術をご存知でしょうか?

トランジションはCSSを滑らかに変化させる技術で、CSS3から仕様として追加された技術です。

 トランジションってどうやって実装するの?

今回はそんなコーディング入門者の方向けに、トランジションを実装する上で重要なtransition-propertyプロパティ

・基本的な使い方

について徹底解説します!!

transition-propertyとは

transition-propertyの読み方

transition-propertyは「トランジション プロパティ」と読みます。

propertyとは、通常は「財産」や「所有物」を意味しますが、プログラミングなどの分野では「設定」「状態」「属性」などの情報を意味します。

なので、transition-propertyはトランジションの情報を与えるプロパティと捉えておいてください。

transition-propertyは「どのプロパティ」の値が変更された時にトランジションを実行させるのかを設定するプロパティ

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

「どのプロパティ」の値が変更された時にトランジションを実行させるのかを設定するプロパティ

です。

トランジションという、CSSを滑らかに変化させる技術を使用するには、まず始めに「どのCSSプロパティ」を変化させるのかと言った主語のような部分を指定する必要があります。

transition-propertyはその主語を指定するプロパティになります。

transition-propertyで利用できる値

transition-propertyプロパティでは以下の値を使うことができます。

説明
プロパティ名  値が変更された時にトランジションを適用するプロパティの名前を指定します。
 all  トランジションの適用が可能な全てのプロパティに適用します。(初期値)
 none  どのプロパティにもトランジションを適用しません。

対応ブラウザ

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

PC用ブラウザ 対応状況
Chrome 完全対応
Edge 完全対応
Firefox 完全対応
Internet Explorer 完全対応
Opera 完全対応
Safari 完全対応
スマートフォン用ブラウザ 対応状況
Android webview 完全対応
Android版Chrome 完全対応
Android版Firefox 完全対応
Android 版 Opera 完全対応
iOS版Safari 完全対応
Samsung Internet 完全対応
MEMO
少し前までは対応していないブラウザがあったため、「-webkit-」のようなベンダープレフィックスをつけることが推奨されていましたが、現在はつけなくても大丈夫とされています。

transition-propertyの基本的な使い方

ここではtransition-propertyの使い方をサンプルコードと一緒に解説していきます!

transition-propertyの実装例

transition-propertyは通常、transition-durationのようなトランジションに関係するプロパティと併用して実装します。

今回は背景色を変化させる例を紹介します。

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

サンプルコードはマウスを円の上に乗せた(ホバー)後に背景色を変化させるため、transition-propertyの値に「background-color」プロパティを指定しています。

マウスカーソルを実際に円の上に乗せると背景色が赤→青に滑らかに変わるのがわかると思います。

このようにtransition-propertyを指定することによって、「どのCSSプロパティ」にトランジションを適用させるのかを指定することができます。

同時に複数のCSSプロパティを指定する方法

実はtransition-propertyは、カンマ「 , 」で区切ることによって、複数のCSSプロパティ名を指定することもできます。

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

今回は背景色と円の横幅、縦幅に同時にトランジションを適用させるため、background-colorプロパティの直後にカンマで区切ってwidthやheightを指定しています。

するとマウスカーソルを円の上に乗せると、滑らかに背景色と円の大きさが変わるのがわかると思います。

まとめ

いかがでしょうか?

今回はtransition-propertyプロパティの基本的な使い方を紹介していきました。

transition-propertyはCSS3でトランジションを実装する上で一番重要と言っても過言ではないキープロパティになります。

この機会にぜひこの記事で使い方を覚えて使いこなせるようにしましょう!!

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