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>-
値が変更されたとき、トランジション効果を適用するプロパティを識別する文字列です。
公式定義
形式文法
transition-property =
none |
<single-transition-property>#
<single-transition-property> =
all |
<custom-ident>
例
基本的な例
ボタンにポインターを当てるかフォーカスすると、 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 |