こんにちは。
皆さんは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 | 完全対応 |
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
