From 9c4b71dea12c0787504524fbfb62a4c6dc621421 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 23 Jan 2022 00:31:37 +0900 Subject: 2022/01/22 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/animation-delay/index.md | 126 ++++++++++++++++++------------ 1 file changed, 74 insertions(+), 52 deletions(-) (limited to 'files/ja') diff --git a/files/ja/web/css/animation-delay/index.md b/files/ja/web/css/animation-delay/index.md index 858bf36c45..64a6a6d2ad 100644 --- a/files/ja/web/css/animation-delay/index.md +++ b/files/ja/web/css/animation-delay/index.md @@ -2,86 +2,108 @@ title: animation-delay slug: Web/CSS/animation-delay tags: - - Animation - CSS - CSS アニメーション - CSS プロパティ - - Reference - - animation-delay + - リファレンス + - recipe:css-property +browser-compat: css.properties.animation-delay translation_of: Web/CSS/animation-delay --- -
{{CSSRef}}
+{{CSSRef}} -

CSS の animation-delay プロパティは、アニメーションをいつ開始するかを指定します。アニメーションは未来のある時点から、直ちに最初から、または直ちにアニメーション周期の途中から始めることができます。

+**`animation-delay`** は [CSS](/ja/docs/Web/CSS) のプロパティで、アニメーションをいつ開始するかを指定します。アニメーションは未来のある時点から、直ちに最初から、または直ちにアニメーション周期の途中から始めることができます。 -
{{EmbedInteractiveExample("pages/css/animation-delay.html")}}
+{{EmbedInteractiveExample("pages/css/animation-delay.html")}} - +アニメーションのプロパティすべてを一度に設定するには、一括指定プロパティである {{cssxref("animation")}} プロパティを使用すると便利です。 -

アニメーションのプロパティすべてを一度に設定するには、一括指定プロパティである {{cssxref("animation")}} プロパティを使用すると便利です。

+## 構文 -

構文

- -
/* 単一のアニメーション */
+```css
+/* 単一のアニメーション */
 animation-delay: 3s;
 animation-delay: 0s;
 animation-delay: -1500ms;
 
 /* 複数のアニメーション */
 animation-delay: 2.1s, 480ms;
-
-

値

+/* グローバル値 */ +animation-delay: inherit; +animation-delay: initial; +animation-delay: revert; +animation-delay: unset; +``` + +### 値 + +- `{{cssxref("<time>")}}` + + - : アニメーションが要素に適用され、アニメーションが始まる瞬間からのオフセット時間。これは秒 (`s`) またはミリ秒 (`ms`) のどちらかで指定できます。単位は必須です。 + + 正の数が指定された場合は、アニメーションが始まる経過時間を示します。 `0s` （既定値）の場合は、アニメーションは適用されたらすぐに始まります。 + + 負の数が指定された場合は、アニメーションは直ちに始まりますが、アニメーション周期の途中からになります。例えば、 `-1s` を遅延時間に指定すると、アニメーションは直ちに始まりますが、アニメーションが始まって1秒の時点から始まります。アニメーションの遅延時間に負の値を指定しても、暗黙的に開始値が指定されている場合、開始値はアニメーションが要素に適用された瞬間から取得されます。 + +> **Note:** `animation-*` プロパティにコンマ区切りで複数の値を指定した場合、 {{cssxref("animation-name")}} プロパティで指定したアニメーションに割り当てられますが、いくつあるかによって異なる方法で割り当てられます。詳しくは、[複数のアニメーションプロパティ値の設定](/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations#setting_multiple_animation_property_values) を参照してください。 -
-
{{cssxref("<time>")}}
-
アニメーションが要素に適用され、アニメーションが始まる瞬間からのオフセット時間。これは秒 (s) またはミリ秒 (ms) のどちらかで指定できます。単位は必須です。
-
正の数が指定された場合は、アニメーションが始まる経過時間を示します。 0s （既定値）の場合は、アニメーションは適用されたらすぐに始まります。
-
-

負の数が指定された場合は、アニメーションは直ちに始まりますが、アニメーション周期の途中からになります。例えば、 -1s を遅延時間に指定すると、アニメーションは直ちに始まりますが、アニメーションが始まって1秒の時点から始まります。アニメーションの遅延時間に負の値を指定しても、暗黙的に開始値が指定されている場合、開始値はアニメーションが要素に適用された瞬間から取得されます。

-
-
+## 公式定義 -
-

メモ: animation-* プロパティにコンマ区切りで複数の値を指定した場合、 {{cssxref("animation-name")}} プロパティで指定したアニメーションに割り当てられますが、いくつあるかによって異なる方法で割り当てられます。詳しくは、複数のアニメーションプロパティ値の設定 を参照してください。

-
+{{cssinfo}} -

形式文法

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

例

+## 例 + +### delay が 2 秒であるアニメーション + +#### HTML + +```html +
+``` + +#### CSS + +```css +.box { + background-color: rebeccapurple; + border-radius: 10px; + width: 100px; + height: 100px; + animation-name: rotate; + animation-duration: 0.7s; + animation-delay: 2s; +} + +@keyframes rotate { + 0% { + transform: rotate(0); + } + 100% { + transform: rotate(360deg); + } +} +``` + +#### 結果 -

CSS アニメーションを参照してください。

+{{EmbedLiveSample("Examples","100%","250")}} -

仕様書

+[CSS アニメーション](/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations)を参照してください。 - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Animations', '#animation-delay', 'animation-delay')}}{{Spec2('CSS3 Animations')}}初回定義。
+## 仕様書 -

{{cssinfo}}

+{{Specifications}} -

ブラウザーの対応

+## ブラウザーの互換性 -

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

+{{Compat}} -

関連情報

+## 関連情報 - +- [CSS アニメーションの使用](/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations) +- JavaScript の {{domxref("AnimationEvent")}} API -- cgit v1.2.3-54-g00ecf