CSS3: transition-property プロパティ - transition効果を適用するCSSプロパティ名

■ 概要

項  目説  明
記述形式 セレクタ {transition-property: }
値 の形式 allnoneプロパティ名
初 期 値 all
対応ブラウザー C3+ / e?+ / N?+ / Fx?+ / Op?+ / Ch9+ / Sa5+
適用可能な要素 すべての要素,::before擬似要素::after擬似要素
継  承 しない

■ 解説

transition-property プロパティ は,transition効果を適用する CSSプロパティ名を指定します。

指定できる値の形式は,以下のとおりです。

説  明
all すべてのプロパティに transition効果を適用します。 (初期値)
none どのプロパティにも transition効果は適用しません。
プロパティ名 transition効果を適用するプロパティ名を指定します。

■ 使用例( transition-property プロパティの利用)

HTMLソース
CSS
<head> ~ </head>
<style type="text/css">
<!--
   div.sample {
      margin: 30px;
      padding: 20px;
      border: 2px solid #0000ff;
   }
   div.sample div{
      width: 220px;
      color: #fff;
      background: #666;
      text-align: center;
      padding: 5px 10px;
      margin: 10px 0px;
      transition-duration: 3s;
   }
   div.sample:hover div{
      width: 660px;
      background-color: blue;
   }
	
   .tprop1 { transition-property: all; }
   .tprop2 { transition-property: none; }
   .tprop3 { transition-property: width; }
-->
</style>
HTML
<body> ~ </body>
<div class="sample">
   <p>マウスカーソルを青枠の内外に置いてください!</p>
   <div class="tprop1">transition効果は幅と背景色</div>
   <div class="tprop2">transition効果は適用せず</div>
   <div class="tprop3">transition効果は幅のみ</div>
</div>

ブラウザー 表示例

マウスカーソルを青枠の内外に置いてください!

transition効果は幅と背景色
transition効果は適用せず
transition効果は幅のみ

この例では,<div>要素sampleクラス では,擬似クラス :hover を用いて,マウスカーソルの位置が変わると子要素の幅と背景色が変化するように指定しています。

■ 備考

【参考ページ】