1. 開発者向けのウェブ技術
  2. CSS
  3. リファレンス
  4. プロパティ
  5. transition-property

このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

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 ⁨2015年9月⁩.

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>
この構文は CSS Transitions による最新の標準を反映しています。すべてのブラウザーがすべての部分を実装しているわけではありません。サポート情報についてはブラウザーの互換性を参照してください。

例

基本的な例

ボタンにポインターを当てるかフォーカスすると、 1 秒間の色のトランジションが行われます。 transition-property は background-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

ブラウザーの互換性

関連情報

Help improve MDN

Learn how to contribute

This page was last modified on by MDN contributors.

View this page on GitHub • Report a problem with this content