transition-property

transition-property は CSS のプロパティで、トランジション効果を適用する CSS プロパティを指定します。

試してみましょう

メモ: アニメーション可能なプロパティのセットは変更される可能性があります。これにより、将来意図しない結果を引き起こす可能性があるため、リストで現状アニメーションしないとしているプロパティを使用することは避けてください。

一括指定プロパティ (例えば background) を指定すると、その個別指定のサブプロパティすべてをアニメーションさせることができます。

構文

css

/* キーワード値 */
transition-property: none;
transition-property: all;

/* <custom-ident> 値 */
transition-property: test_05;
transition-property: -specific;
transition-property: sliding-vertically;

/* 複数の値 */
transition-property: test1, animation4;
transition-property: all, height, color;
transition-property:
  all,
  -moz-specific,
  sliding;

/* グローバル値 */
transition-property: inherit;
transition-property: initial;
transition-property: revert;
transition-property: unset;

値

none

どのプロパティもトランジションを行いません。

all

トランジションが可能なすべてのプロパティで、トランジションを行います。

<custom-ident>

値が変更されたとき、トランジション効果を適用するプロパティを識別する文字列です。

公式定義

初期値すべて
適用対象すべての要素、::before / ::after 擬似要素
継承なし
計算値指定通り
アニメーションの種類アニメーション不可

形式文法

transition-property = 
  none                           |
  <single-transition-property>#  

<single-transition-property> = 
  all             |
  <custom-ident>

例

単純な例

この例では、ユーザーが要素の上にカーソルを置いたときに、 4 秒間でフォントサイズの遷移を行います。 transition-property は font-size です。

HTML

html

<a class="target">ここにマウスポインターを置いてください</a>

CSS

css

.target {
  font-size: 14px;
  transition-property: font-size;
  transition-duration: 4s;
}

.target:hover {
  font-size: 36px;
}

結果

transition-property のその他の例は、主となる CSS トランジションの記事にあります。

仕様書

Specification
CSS Transitions
# transition-property-property

ブラウザーの互換性

BCD tables only load in the browser

関連情報