このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
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> <div>トランジションを見るには<br />ポインターを当ててください</div></section>#example-element { background-color: #e4f0f5; color: black; padding: 1rem; border-radius: 0.5rem; font: 1em monospace; width: 100%; transition: margin-right 2s;}#default-example:hover > #example-element { background-color: #990099; color: white; 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>フォーカスしてください</button>CSS
html { height: 100vh;}button { font-size: 1.4rem; padding: 10px 20px; border: 1px solid #cccccc; border-radius: 10px; outline: none;}css
.target { transition-property: background-color; transition-duration: 1s; background-color: #cccccc;}.target:hover,.target:focus { background-color: #eeeeee;}transition-property のその他の例については、CSS トランジションガイドを参照してください。
仕様書
| Specification |
|---|
| CSS Transitions Module Level 1 # transition-property-property |