transition-property
試してみましょう
一括指定プロパティ(例えば 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 |
ブラウザーの互換性
BCD tables only load in the browser