From bbbd41a66995ce7892462521ac53e8a6bf4f1a99 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 22 May 2021 16:25:05 +0900 Subject: Web/CSS/transition を更新 (#737) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Web/CSS/transition を更新 - 2021/03/16 時点の英語版に同期 * Web/CSS/transition を更新 いくつかの修正漏れを修正 --- files/ja/web/css/transition/index.html | 122 +++++++++++++++++++++------------ 1 file changed, 77 insertions(+), 45 deletions(-) (limited to 'files/ja/web/css/transition/index.html') diff --git a/files/ja/web/css/transition/index.html b/files/ja/web/css/transition/index.html index 07c0ae2372..a260f7e864 100644 --- a/files/ja/web/css/transition/index.html +++ b/files/ja/web/css/transition/index.html @@ -6,21 +6,31 @@ tags: - CSS Property - CSS Transitions - CSS プロパティ - - CSS 遷移 + - CSS トランジション - Reference + - recipe:css-shorthand-property translation_of: Web/CSS/transition ---
{{CSSRef}}
-

CSS の transition プロパティは、 {{cssxref("transition-property")}}、 {{cssxref("transition-duration")}}、 {{cssxref("transition-timing-function")}}、 {{cssxref("transition-delay")}} の一括指定プロパティです。

+

transition は CSS のプロパティで、 {{cssxref("transition-property")}}、 {{cssxref("transition-duration")}}、 {{cssxref("transition-timing-function")}}、 {{cssxref("transition-delay")}} の一括指定プロパティです。

{{EmbedInteractiveExample("pages/css/transition.html")}}
- +

トランジション (transition) は、要素の 2 つの状態間の変化を定義するためのものです。それぞれの状態は {{cssxref(":hover")}} や {{cssxref(":active")}} のような擬似クラスで定義されたり、 JavaScript を使用して動的に設定されたりします。

-

{{原語併記("遷移", "transition")}} によって、要素の2つの状態間の変化を定義することができます。それぞれの状態は {{cssxref(":hover")}} や {{cssxref(":active")}} のような疑似クラスで定義するか、 JavaScript を使用して動的に設定します。

+

構成要素のプロパティ

-

構文

+

このプロパティは以下の CSS プロパティの一括指定です。

+ + + +

構文

/* 1つのプロパティへの適用 */
 /* プロパティ名 | 時間 */
@@ -29,10 +39,10 @@ transition: margin-right 4s;
 /* プロパティ名 | 時間 | 遅延 */
 transition: margin-right 4s 1s;
 
-/* プロパティ名 | 時間 | 時間関数 */
+/* プロパティ名 | 時間 | イージング関数 */
 transition: margin-right 4s ease-in-out;
 
-/* プロパティ名 | 時間 | 時間関数 | 遅延 */
+/* プロパティ名 | 時間 | イージング関数 | 遅延 */
 transition: margin-right 4s ease-in-out 1s;
 
 /* 2つのプロパティへの適用 */
@@ -47,62 +57,84 @@ transition: initial;
 transition: unset;
-

transition プロパティは、1つまたは複数の単体プロパティによる遷移を、コンマで区切って指定します。

+

transition プロパティは、 1 つまたは複数の単体プロパティによるトランジションを、コンマで区切って指定します。

-

それぞれの単体プロパティの遷移では、単体のプロパティ（または特別な値である all および none）に適用される遷移を記述します。記述は以下の通りです。

+

それぞれの単体プロパティのトランジションでは、単体のプロパティ (または特別な値である all および none) に適用されるトランジションを記述します。記述は以下の通りです。

-

プロパティ値の一覧が同じ長さではない場合については、 how things are handled を参照してください。 つまり、実際にアニメーション化されているプロパティの数を超える余分な遷移の記述は無視されます。

+

プロパティ値の一覧が同じ長さではない場合については、プロパティ値のリストの長さが異なる場合を参照してください。つまり、実際にアニメーション化されているプロパティの数を超える余分なトランジションの記述は無視されます。

+ +

公式定義

-

構文形式

+

{{CSSInfo}}

+ +

形式文法

{{csssyntax}} -

例

+

例

-

CSS transitions の記事に、トランジションの例がいくつかあります。

+

単純な例

-

仕様書

+

この例では、ユーザーが要素の上にカーソルを置いたときに、 1 秒間の遅延をつけて 4 秒間でフォントサイズの遷移を行います。

- - - - - - - - - - - - - - - -
仕様書策定状況コメント
{{ SpecName('CSS3 Transitions', '#transition-shorthand-property', 'transition') }}{{ Spec2('CSS3 Transitions') }}初回定義
+

HTML

+ +
<a class="target">Hover over me</a>
-

{{cssinfo}}

+

CSS

-

ブラウザー実装状況

+
.target {
+  font-size: 14px;
+  transition: font-size 4s 1s;
+}
+
+.target:hover {
+  font-size: 36px;
+}
+
+ +

{{EmbedLiveSample('Simple_example', 600, 100)}}

+ +

CSS transitions の記事に、 CSS トランジションの例がいくつかあります。

+ +

仕様書

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

ブラウザーの互換性

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

-

関連情報

+

関連情報

-- cgit v1.2.3-54-g00ecf