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.

We’d love to hear your thoughts on the next set of proposals for the JavaScript language. You can find a description of the proposals here.

Please take two minutes to fill out our short survey.

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

試してみましょう

transition-property: margin-right;

transition-property: margin-right, color;

transition-property: all;

transition-property: none;

<section id="default-example">
  <div id="example-element">Hover to see<br />the transition.</div>
</section>

#example-element {
  background-color: #e4f0f5;
  color: #000;
  padding: 1rem;
  border-radius: 0.5rem;
  font: 1em monospace;
  width: 100%;
  transition: margin-right 2s;
}

#default-example:hover > #example-element {
  background-color: #909;
  color: #fff;
  margin-right: 40%;
}

一括指定プロパティ（例えば 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-property は background-color です。

HTML

html

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

CSS

html {
  height: 100vh;
}

button {
  font-size: 1.4rem;
  padding: 10px 20px;
  border: 1px solid #ccc;
  border-radius: 10px;
  outline: none;
}

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