From 747ffa918a2d3eed89f13d71e2505702ea2f9d0b Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 31 Dec 2021 00:55:43 +0900 Subject: 2021/08/22 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/transition-property/index.md | 138 ++++++++++++++------------ 1 file changed, 74 insertions(+), 64 deletions(-) (limited to 'files/ja/web') diff --git a/files/ja/web/css/transition-property/index.md b/files/ja/web/css/transition-property/index.md index 099ed1504f..e56c39d12a 100644 --- a/files/ja/web/css/transition-property/index.md +++ b/files/ja/web/css/transition-property/index.md @@ -3,31 +3,31 @@ title: transition-property slug: Web/CSS/transition-property tags: - CSS - - CSS Property - - CSS Transitions - - Reference - - 'recipe:css-property' + - CSS プロパティ + - CSS トランジション + - リファレンス + - recipe:css-property +browser-compat: css.properties.transition-property translation_of: Web/CSS/transition-property --- -
{{CSSRef}}
+{{CSSRef}} -

transition-property は CSS のプロパティで、トランジション効果を適用する CSS プロパティを指定します。

+**`transition-property`** は [CSS](/ja/docs/Web/CSS) のプロパティで、[トランジション効果](/ja/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions)を適用する CSS プロパティを指定します。 -
{{EmbedInteractiveExample("pages/css/transition-property.html")}}
+{{EmbedInteractiveExample("pages/css/transition-property.html")}} - +> **Note:** [アニメーション可能なプロパティのセット](/ja/docs/Web/CSS/CSS_animated_properties)は変更される可能性があります。これにより、将来意図しない結果を引き起こす可能性があるため、リストで現状アニメーションしないとしているプロパティを使用することは避けてください。 -
注: アニメーション可能なプロパティのセットは変更される可能性があります。これにより、将来意図しない結果を引き起こす可能性があるため、リストで現状アニメーションしないとしているプロパティを使用することは避けてください。
+一括指定プロパティ (例えば {{cssxref("background")}}) を指定すると、その個別指定のサブプロパティすべてをアニメーションさせることができます。 -

一括指定プロパティ (例えば {{cssxref("background")}}) を指定すると、その個別指定のサブプロパティすべてをアニメーションさせることができます。

+## 構文 -

構文

- -
/* キーワード値 */
+```css
+/* キーワード値 */
 transition-property: none;
 transition-property: all;
 
-/* <custom-ident> 値 */
+/*  値 */
 transition-property: test_05;
 transition-property: -specific;
 transition-property: sliding-vertically;
@@ -40,62 +40,72 @@ transition-property: all, -moz-specific, sliding;
 /* グローバル値 */
 transition-property: inherit;
 transition-property: initial;
+transition-property: revert;
 transition-property: unset;
-
+``` -

値

+### 値 -
-
none
-
どのプロパティもトランジションを行いません。
-
all
-
トランジションが可能なすべてのプロパティで、トランジションを行います。
-
{{cssxref("<custom-ident>")}}
-
値が変更されたとき、トランジション効果を適用するプロパティを識別する文字列です。
-
+- `none` + - : どのプロパティもトランジションを行いません。 +- `all` + - : トランジションが可能なすべてのプロパティで、トランジションを行います。 +- {{cssxref("<custom-ident>")}} + - : 値が変更されたとき、トランジション効果を適用するプロパティを識別する文字列です。 -

Formal definition

+## 公式定義 -

{{CSSInfo}}

+{{CSSInfo}} -

Formal syntax

+## 形式文法 {{csssyntax}} -

例

- -

中心となる CSS トランジションの記事に、 CSS トランジションの例がいくつかあります。

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Transitions', '#transition-property-property', 'transition-property')}}{{Spec2('CSS3 Transitions')}}初回定義
- -

ブラウザーの互換性

- -

{{Compat("css.properties.transition-property")}}

- -

関連情報

- - +## 例 + +### 単純な例 + +この例では、ユーザーが要素の上にカーソルを置いたときに、 4 秒間でフォントサイズの遷移を行います。 `transition-property` は `font-size` です。 + +#### HTML + +```html +ここにマウスポインターを置いてください +``` + +#### CSS + +```css +.target { + font-size: 14px; + transition-property: font-size; + transition-duration: 4s; +} + +.target:hover { + font-size: 36px; +} +``` + +#### 結果 + +{{EmbedLiveSample('Simple_example', 600, 100)}} + +`transition-property` のその他の例は、主となる [CSS トランジション](/ja/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions)の記事にあります。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS トランジションの使用](/ja/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions) +- {{cssxref('transition')}} +- {{cssxref('transition-duration')}} +- {{cssxref('transition-timing-function')}} +- {{cssxref('transition-delay')}} +- {{domxref("TransitionEvent")}} -- cgit v1.2.3-54-g00ecf