From 8b42f444c5c10e0abc2b8015a0a68e3798f9bea9 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 22 Jan 2022 22:56:36 +0900 Subject: CSS animations 系のプロパティを移行 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/animation-delay/index.md | 87 +++++++++++++++++++++++++++++++ 1 file changed, 87 insertions(+) create mode 100644 files/ja/web/css/animation-delay/index.md (limited to 'files/ja/web/css/animation-delay/index.md') diff --git a/files/ja/web/css/animation-delay/index.md b/files/ja/web/css/animation-delay/index.md new file mode 100644 index 0000000000..858bf36c45 --- /dev/null +++ b/files/ja/web/css/animation-delay/index.md @@ -0,0 +1,87 @@ +--- +title: animation-delay +slug: Web/CSS/animation-delay +tags: + - Animation + - CSS + - CSS アニメーション + - CSS プロパティ + - Reference + - animation-delay +translation_of: Web/CSS/animation-delay +--- +
{{CSSRef}}
+ +

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

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

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

+ +

構文

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

値

+ +
+
{{cssxref("<time>")}}
+
アニメーションが要素に適用され、アニメーションが始まる瞬間からのオフセット時間。これは秒 (s) またはミリ秒 (ms) のどちらかで指定できます。単位は必須です。
+
正の数が指定された場合は、アニメーションが始まる経過時間を示します。 0s （既定値）の場合は、アニメーションは適用されたらすぐに始まります。
+
+

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

+
+
+ +
+

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

+
+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

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

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Animations', '#animation-delay', 'animation-delay')}}{{Spec2('CSS3 Animations')}}初回定義。
+ +

{{cssinfo}}

+ +

ブラウザーの対応

+ +

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

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf