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: unset;
値
none
-
どのプロパティもトランジションを行いません。
all
-
トランジションが可能なすべてのプロパティで、トランジションを行います。
<custom-ident>
-
値が変更されたとき、トランジション効果を適用するプロパティを識別する文字列です。
公式定義
形式文法
transition-property =
none |
<single-transition-property>#
<single-transition-property> =
all |
<custom-ident>
例
単純な例
この例では、ユーザーが要素の上にカーソルを置いたときに、 4 秒間でフォントサイズの遷移を行います。 transition-property
は font-size
です。
HTML
html
<a class="target">ここにマウスポインターを置いてください</a>
CSS
css
.target {
font-size: 14px;
transition-property: font-size;
transition-duration: 4s;
}
.target:hover {
font-size: 36px;
}
結果
transition-property
のその他の例は、主となる CSS トランジションの記事にあります。
仕様書
Specification |
---|
CSS Transitions # transition-property-property |
ブラウザーの互換性
BCD tables only load in the browser