From 3b25a98e5f7553338912cee61f05301aa5e4130b Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 31 Dec 2021 00:05:51 +0900 Subject: 2021/08/13 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/transition-delay/index.md | 373 ++++++----------------------- 1 file changed, 78 insertions(+), 295 deletions(-) (limited to 'files') diff --git a/files/ja/web/css/transition-delay/index.md b/files/ja/web/css/transition-delay/index.md index cea8b9b669..ae8b83687f 100644 --- a/files/ja/web/css/transition-delay/index.md +++ b/files/ja/web/css/transition-delay/index.md @@ -5,351 +5,134 @@ tags: - CSS - CSS トランジション - CSS プロパティ - - Reference - リファレンス + - recipe:css-property +browser-compat: css.properties.transition-delay translation_of: Web/CSS/transition-delay --- -
{{CSSRef}}
+{{CSSRef}} -

CSS の transition-delay プロパティは、値が変更されたときにプロパティのトランジション効果が始まるまでの待ち時間を指定します。

+CSS の `transition-delay` プロパティは、値が変更されたときにプロパティの[トランジション効果](/ja/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions)が始まるまでの待ち時間を指定します。 -
{{EmbedInteractiveExample("pages/css/transition-delay.html")}}
+{{EmbedInteractiveExample("pages/css/transition-delay.html")}} - +待ち時間はゼロ、正の数、負の数で指定します。 -

待ち時間はゼロ、正の数、負の数で指定します。

+- `0s` (または `0ms`) の値は直ちにトランジション効果が始まります。 +- 正の数の場合は、指定された時間の長さの分だけトランジション効果が始まるのが遅れます。 +- 負の数の場合は、直ちにトランジション効果が、効果の途中から始まります。言い換えれば、効果は指定された時間の長さの分だけ既に実行されていたかのように動きます。 - +複数の待ち時間を指定することができ、複数のプロパティのトランジションを行うときに有用です。それぞれの待ち時間は、マスターリストである {{cssxref("transition-property")}} プロパティによって指定された対応するプロパティに適用されます。マスターリストよりも指定された待ち時間が少ない場合は、充足するまで待ち時間のリストが繰り返して使用されます。また待ち時間の数が多い場合は、リストが適切な長さに切り詰められます。どちらの場合も、 CSS の宣言として妥当です。 -

複数の待ち時間を指定することができ、複数のプロパティのトランジションを行うときに有用です。それぞれの待ち時間は、マスターリストである {{cssxref("transition-property")}} プロパティによって指定された対応するプロパティに適用されます。マスターリストよりも指定された待ち時間が少ない場合は、充足するまで待ち時間のリストが繰り返して使用されます。また待ち時間の数が多い場合は、リストが適切な長さに切り詰められます。どちらの場合も、 CSS の宣言として妥当です。

+## 構文 -

構文

- -
/* <time> 値 */
+```css
+/*
+``` -

値

+### 値 -
-
<time>
-
プロパティの値の変更からアニメーション効果が始まるまでの待ち時間を表す {{cssxref("<time>")}} 形式の値。
-
+- {{cssxref("<time>")}} + - : プロパティの値が変化してからトランジション効果が始まるまでの待ち時間を記述します。 -

形式文法

+## 公式定義 -{{csssyntax}} +{{CSSInfo}} -

例

+## 形式文法 -
-
-

transition-delay: 0.5s

+{{csssyntax}} - +
2 seconds
-
{{EmbedLiveSample("delay_0_5s",275,150)}}
-
+
4 seconds
-
-

transition-delay: 1s

+ +``` - - -
{{EmbedLiveSample("delay_1s",275,150)}}
-
- -
-

transition-delay: 2s

- - +const changeButton = document.querySelector("#change"); +changeButton.addEventListener("click", change); +``` -
{{EmbedLiveSample("delay_2s",275,150)}}
-
+#### 結果 -
-

transition-delay: 4s

+{{EmbedLiveSample("Example_showing_different_delays",275,200)}} - - -
{{EmbedLiveSample("delay_4s",275,150)}}
-
-
- -

仕様書

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

{{cssinfo}}

- -

ブラウザーの対応

- -

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

- -

関連情報

- - +- [CSS トランジションの利用](/ja/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions) +- {{domxref("TransitionEvent")}} -- cgit v1.2.3-54-g00ecf