transition-property

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

transition-propertyCSS のプロパティで、トランジション効果を適用する 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: revert-layer;
transition-property: unset;

none

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

all

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

<custom-ident>

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

公式定義

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

形式文法

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

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

基本的な例

ボタンにポインターを当てるかフォーカスすると、 1 秒間の色のトランジションが行われます。 transition-propertybackground-color です。

HTML

html
<button class="target">フォーカスしてください</button>

CSS

css
.target {
  transition-property: background-color;
  transition-duration: 1s;
  background-color: #ccc;
}

.target:hover,
.target:focus {
  background-color: #eee;
}

transition-property のその他の例については、 CSS トランジションガイドを参照してください。

仕様書

Specification
CSS Transitions
# transition-property-property

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
transition-property
IDENT value
all
none

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Requires a vendor prefix or different name for use.
Has more compatibility info.

関連情報