Title

transition-propertyとは

ここで説明するtransition-property とは次の語句からなるCSSのプロパティです。

transition

読み: トランジション
意味: 変更、変化、変更、遷移(移り変わること)

property

読み: プロパティ
意味: 属性、特性、財産、資産、所有物

目次に戻る

transition-propertyプロパティの概要

このプロパティはトランジションの効果が適用対象となるプロパティを指定することができます。

つまり、transition-propertyで指定したプロパティはプロパティ値の遷移対象になるということで、 逆に指定されていないプロパティは遷移の対象から外れることになります。

遷移とは「移り変わり」の意味ですが、遷移するとはプロパティの値が時間軸と共に変化していくことを言っています。 結果としてトランジションはアニメーションのように要素の形状を変化させることができるようになります。 逆にトランジションの対象から外れるということは、アニメーションしないで瞬時に値が変化することになります。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。このプロパティの記述は以下のような書き方になります。

セレクター{transition-property: 設定値;}

目次に戻る

実機サンプルとサンプルコード

ここからは実際のHTML要素にプロパティを適用させて結果を見ていきたいと思います。

このサンプルではdiv要素を使います。 疑似クラスの:hoverでプロパティ値の変化を設定して、トランジションの効果みていこうと思います。 :hoverはマウスポインタが要素の上に乗っている状態でstyleが適用されるセレクタです。

トランジションの対象となるプロパティは、あらかじめ以下のように設定しています。

div{
	background-color: khaki;
	transform: rotate(0deg);
	transition-duration: 1s;
	transition-timing-function: linear;
}
div:hover{
	background-color: deepskyblue;
	transform: rotate(90deg);
}

divとdiv:hoverのセレクタで共通のプロパティを設定することで値の変化を指定します。 ここでは background-color と transform: rotate が共通の設定プロパティであり、プロパティの値が遷移する対象となります。

初期値: all

初期値の all はトランジションが可能な全てのプロパティにトランジション効果が適用されます。

このサンプルでいうと background-color と transform がプロパティの値の遷移対象になっているということです。

要素にマウスポインタを合わせるとトランジションが開始されます。

div{transition-property: all;}

目次に戻る

キーワード値: none

noneキーワードは、全てのプロパティをトランジションの対象から外します。

つまり上記のコード内で指定している transition-duration と transition-timing-function の設定の効果は適用されませんので直ちに background-color と transform の設定値の変更が適用されます。

div{transition-property: none;}

目次に戻る

プロパティ名: 任意のプロパティ名を指定する

任意のプロパティ名を指定した場合には、そのプロパティに対してのみトランジションの効果が適用されます。

プロパティ名: transform

transformを指定した場合には、このtransformに対してのみトランジションが適用されます。

div{transition-property: transform;}

プロパティ名: background-color

background-colorを指定した場合には、background-colorに対してのみトランジションが適用されます。

div{transition-property: background-color;}

プロパティ名: 複数のプロパティを指定する

複数のプロパティを名指しでトランジションの対象とする場合はプロパティをカンマで区切って列挙します。 ここではtransformとbackground-colorを指定する場合でコードに記述してみます。

div{transition-property: transform, background-color;}

目次に戻る

グローバル値

transition-propertyプロパティに対してのグローバルキーワードは以下の3つです。 ただし、このキーワードはブラウザによっては、完全に機能するかは分かりません。

• inheritは親要素の値の継承を促します。
• initialは値を初期値のallに戻します。
• unsetは継承の初期値に戻します。
  ※このプロパティは親要素の値を継承しないのが基本なので、initialと同じ働きをします。

セレクター{transition-property: グローバル値;}

目次に戻る

補足説明

• すべての要素に適用可能
• 親要素の値を継承しない

目次に戻る

まとめ

ここでは、検証としてブロック要素とインライン要素に同じCSSを設定した場合の適用状態が確認できます。 コードの部分をクリックし、要素にマウスオーバーするとサンプルにCSSが反映されます。

transition-property: all;

transition-property: none;

transition-property: background-color;

transition-property: width, height;

目次に戻る