initial commit

3 files changed, 254 insertions, 0 deletions

diff --git a/files/ja/web/api/animation/animation/index.html b/files/ja/web/api/animation/animation/index.html
new file mode 100644
index 0000000000..21128281dc
--- /dev/null
+++ b/files/ja/web/api/animation/animation/index.html
@@ -0,0 +1,60 @@
+---
+title: Animation()
+slug: Web/API/Animation/Animation
+translation_of: Web/API/Animation/Animation
+---
+<p>{{ SeeCompatTable() }}{{ APIRef("Web Animations API") }}</p>
+
+<p><a href="/ja/docs/Web/API/Web_Animations_API">ウェブアニメーション API</a> の <strong><code>Animation()</code></strong> コンストラクタは新たに <code>Animation</code> オブジェクトのインスタンスを返します。</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var <em>animation</em> = new Animation([<em>effect</em>][, <em>timeline</em>]);</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>effect</code> {{optional_inline}}</dt>
+ <dd>The target effect, as an object based on the {{domxref("AnimationEffectReadOnly")}} interface, to assign to the animation. Although in the future other effects such as <code>SequenceEffect</code>s or <code>GroupEffect</code>s might be possible, the only kind of effect currently available is {{domxref("KeyframeEffect")}}. This can be <code>null</code> (which is the default) to indicate that there should be no effect applied.</dd>
+ <dt><code>timeline</code> {{optional_inline}}</dt>
+ <dd>Specifies the <code>timeline</code> with which to associate the animation, as an object of a type based on the {{domxref("AnimationTimeline")}} interface. Currently the only timeline type available is {{domxref("DocumentTimeline")}}, but in the future there my be timelines associated with gestures or scrolling, for example. The default value is {{domxref("Document.timeline")}}, but this can be set to <code>null</code> as well.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p>In the <a href="http://codepen.io/rachelnabors/pen/eJyWzm/?editors=0010">Follow the White Rabbit example</a>, the <code>Animation()</code> constructor is used to create an <code>Animation</code> for the <code>rabbitDownKeyframes</code> using the document's <code>timeline</code>:</p>
+
+<pre class="brush: js">var rabbitDownAnimation = new Animation(rabbitDownKeyframes, document.timeline);
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Animations', '#dom-animation-animation', 'Animation()' )}}</td>
+   <td>{{Spec2('Web Animations')}}</td>
+   <td>Editor's draft.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("api.Animation.Animation")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a></li>
+ <li>{{domxref("Animation")}}</li>
+</ul>
diff --git a/files/ja/web/api/animation/cancel/index.html b/files/ja/web/api/animation/cancel/index.html
new file mode 100644
index 0000000000..96c63e90a5
--- /dev/null
+++ b/files/ja/web/api/animation/cancel/index.html
@@ -0,0 +1,75 @@
+---
+title: Animation.cancel()
+slug: Web/API/Animation/cancel
+tags:
+  - API
+  - Animation
+  - Method
+  - Reference
+  - Web Animations
+  - cancel
+  - waapi
+  - web animations api
+translation_of: Web/API/Animation/cancel
+---
+<p>{{ SeeCompatTable() }}{{ APIRef("Web Animations") }}</p>
+
+<p>{{domxref("Animation")}} インターフェースにある Web Animations API の <code><strong>cancel()</strong></code> メソッドは、このアニメーションによって引き起こされたすべての {{domxref("KeyframeEffect")}}を初期化し、再生を中止します。</p>
+
+<div class="note">
+<p>アニメ―ションをキャンセルした時、{{domxref("Animation.startTime", "startTime")}} と {{domxref("Animation.currentTime", "currentTime")}} は、 <code>null</code> にセットされます。</p>
+</div>
+
+<h2 id="構文">構文</h2>
+
+<pre class="syntaxbox notranslate"><em>Animation</em>.cancel();</pre>
+
+<h3 id="引数">引数</h3>
+
+<p>なし</p>
+
+<h3 id="戻り値">戻り値</h3>
+
+<p>なし</p>
+
+<h3 id="例外">例外</h3>
+
+<p>このメソッドは、直接例外をスローしません。 しかし、キャンセル時にアニメーションの{{domxref("Animation.playState", "playState")}}が <code>"idle"</code> 以外の場合、 {{domxref("Animation.finished", "current finished promise", "", 1)}} は <code>AbortError</code> という名前の  {{domxref("DOMException")}} で拒否されます。</p>
+
+<dl>
+</dl>
+
+<h2 id="仕様">仕様</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">仕様書</th>
+   <th scope="col">策定状況</th>
+   <th scope="col">備考</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Animations', '#dom-animation-cancel', 'Animation.cancel()' )}}</td>
+   <td>{{Spec2('Web Animations')}}</td>
+   <td>Editor's draft.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="ブラウザ実装状況">ブラウザ実装状況</h2>
+
+<div>
+
+
+<p>{{Compat("api.Animation.cancel")}}</p>
+</div>
+
+<h2 id="関連情報" style="line-height: 30px; font-size: 2.14285714285714rem;">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/API/Web_Animations_API">Web Animations API</a></li>
+ <li>{{domxref("KeyframeEffect")}}</li>
+ <li>{{domxref("Animation")}}</li>
+ <li>{{domxref("Animation.playState")}}</li>
+ <li>{{domxref("Animation.finished")}} は、 <code>playState</code> <span class="tlid-translation translation" lang="ja"><span title="">が </span></span><code>"idle"</code><span class="tlid-translation translation" lang="ja"><span title=""> でない場合、</span></span> <span class="tlid-translation translation" lang="ja"><span title="">このアクションが拒否する</span></span> promise<span class="tlid-translation translation" lang="ja"><span title=""> を返します。</span></span></li>
+</ul>
diff --git a/files/ja/web/api/animation/index.html b/files/ja/web/api/animation/index.html
new file mode 100644
index 0000000000..c4125a26e6
--- /dev/null
+++ b/files/ja/web/api/animation/index.html
@@ -0,0 +1,119 @@
+---
+title: Animation
+slug: Web/API/Animation
+translation_of: Web/API/Animation
+---
+<div>{{ APIRef("ウェブアニメーション") }}{{SeeCompatTable}}</div>
+
+<p><a href="https://developer.mozilla.org/ja/docs/Web/API/Web_Animations_API">ウェブアニメーション API</a><strong> </strong>における<strong> <code>Animation</code></strong> インターフェースは単一のアニメーションプレーヤーを表し、アニメーションノードやソースに対する再生制御やタイムラインを提供します。</p>
+
+<h2 id="コンストラクタ">コンストラクタ</h2>
+
+<dl>
+ <dt>{{domxref("Animation.Animation()", "Animation()")}}</dt>
+ <dd>新たに <code>Animation</code> オブジェクトのインスタンスを生成します。</dd>
+</dl>
+
+<h2 id="プロパティ">プロパティ</h2>
+
+<dl>
+ <dt>{{domxref("Animation.currentTime")}}</dt>
+ <dd>再生中か停止中かに関わらずアニメーションの現在時間をミリ秒で表します。もしアニメーションに {{domxref("AnimationTimeline", "timeline")}} が無い、またはアニメーションが有効では無かったりまだ再生させていない場合、この値は <code>null</code> となります。</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Animation.effect")}}</dt>
+ <dd>対象のアニメーションに紐付いた {{domxref("AnimationEffectReadOnly")}} の取得および設定を行います。このプロパティ値は通常 {{domxref("KeyframeEffect")}} オブジェクトになります。</dd>
+ <dt>{{domxref("Animation.finished")}} {{readOnlyInline}}</dt>
+ <dd>対象アニメーションの終了時に Promise を返します。</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Animation.id")}}</dt>
+ <dd>アニメーションを識別するための <code>String</code> の取得および設定を行います。</dd>
+ <dt>{{domxref("Animation.pending")}} {{readonlyinline}}</dt>
+ <dd>アニメーションが再生の初期化や再生停止といった非同期処理のため現在待ち状態にあるかどうかを示します。</dd>
+ <dt>{{domxref("Animation.playState")}} {{readOnlyInline}}</dt>
+ <dd>アニメーションの再生状況を示す列挙型の値を返します。</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Animation.playbackRate")}}</dt>
+ <dd>アニメーションの再生速度の取得および設定をします。</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Animation.ready")}} {{readOnlyInline}}</dt>
+ <dd>対象アニメーションの再生準備ができた時点で Promise を返します。</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Animation.startTime")}}</dt>
+ <dd>アニメーションが再生される所定時間の取得および設定を行います。</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Animation.timeline")}}</dt>
+ <dd>対象のアニメーションに紐づいた {{domxref("AnimationTimeline", "timeline")}} の取得および設定を行います。</dd>
+</dl>
+
+<h3 id="イベントハンドラ">イベントハンドラ</h3>
+
+<dl>
+ <dt>{{domxref("Animation.oncancel")}}</dt>
+ <dd><code>cancel</code> イベントのイベントハンドラーの取得および設定を行います。</dd>
+ <dt>{{domxref("Animation.onfinish")}}</dt>
+ <dd><code>finish</code> イベントのイベントハンドラーの取得および設定を行います。</dd>
+</dl>
+
+<h2 id="メソッド">メソッド</h2>
+
+<dl>
+ <dt>{{domxref("Animation.cancel()")}}</dt>
+ <dd>対象アニメーションによる全ての {{domxref("KeyframeEffect", "keyframeEffects")}} を消去し、再生を中断します。</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Animation.finish()")}}</dt>
+ <dd>アニメーションが通常再生中の場合は終了を、逆再生中の場合は開始時点を設定します。</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Animation.pause()")}}</dt>
+ <dd>再生中のアニメーションを一時停止します。</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Animation.play()")}}</dt>
+ <dd>アニメーションを再生もしくは再開します。既に終了しているアニメーションについては再度再生を行います。</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Animation.reverse()")}}</dt>
+ <dd>アニメーションを逆再生し、開始時点で終了します。アニメーションが終了しているまたは未再生の場合は終わりから最初まで再生します。</dd>
+ <dt>{{domxref("Animation.updatePlaybackRate()")}}</dt>
+ <dd>対象アニメーション再生位置を同期後、アニメーションの再生速度を設定します。</dd>
+</dl>
+
+<h2 id="仕様">仕様</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">仕様</th>
+   <th scope="col">状態</th>
+   <th scope="col">コメント</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Web Animations", "#the-animation-interface", "Animation")}}</td>
+   <td>{{Spec2("Web Animations")}}</td>
+   <td>初期定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="ブラウザ実装状況">ブラウザ実装状況</h2>
+
+
+
+<p>{{Compat("api.Animation")}}</p>