From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/css/animation-duration/index.html | 91 ++++++++++++++++++++++++++ 1 file changed, 91 insertions(+) create mode 100644 files/ja/web/css/animation-duration/index.html (limited to 'files/ja/web/css/animation-duration/index.html') diff --git a/files/ja/web/css/animation-duration/index.html b/files/ja/web/css/animation-duration/index.html new file mode 100644 index 0000000000..becc1fd743 --- /dev/null +++ b/files/ja/web/css/animation-duration/index.html @@ -0,0 +1,91 @@ +--- +title: animation-duration +slug: Web/CSS/animation-duration +tags: + - Animation + - CSS + - CSS アニメーション + - CSS プロパティ + - Reference + - animation-duration +translation_of: Web/CSS/animation-duration +--- +
{{CSSRef}}
+ +

animation-duration は CSS のプロパティで、1回のアニメーション周期が完了するまでの所要時間を設定します。

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

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

+ +

構文

+ +
/* 単一のアニメーション */
+animation-duration: 6s;
+animation-duration: 120ms;
+
+/* 複数のアニメーション */
+animation-duration: 1.64s, 15.22s;
+animation-duration: 10s, 35s, 230ms;
+
+ +

値

+ +
+
{{cssxref("<time>")}}
+
1回のアニメーションの周期にかかる時間。この値は、秒 (s) またはミリ秒 (ms) で指定することができます。値は正の数か0でなければならず、単位は必須です。 0s の値は、既定値ですが、アニメーションを実行しないことを意味します。
+
+ +
+

注: 負の数は無効であり、宣言が無視されます。一部、初期の接頭辞付きの実装は 0s と等価に解釈するかもしれません。

+
+ +
+

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

+
+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

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

+ +

仕様書

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

ブラウザーの互換性

+ + + +

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

+ +

関連情報

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