initial commit

2 files changed, 438 insertions, 0 deletions

diff --git a/files/ja/web/api/web_animations_api/index.html b/files/ja/web/api/web_animations_api/index.html
new file mode 100644
index 0000000000..e0f14a1325
--- /dev/null
+++ b/files/ja/web/api/web_animations_api/index.html
@@ -0,0 +1,86 @@
+---
+title: ウェブアニメーション API
+slug: Web/API/Web_Animations_API
+tags:
+  - API
+  - Animation
+  - Landing
+  - Reference
+  - Web Animations
+  - アニメーション
+  - ウェブアニメーション
+translation_of: Web/API/Web_Animations_API
+---
+<p>{{DefaultAPISidebar("Web Animations")}}</p>
+
+<p>Web Animation API を使うことで 、ウェブページの見た目の変更を同期させたり時間を調整すること、つまり DOM 要素のアニメーションが可能です。これらはタイミングモデルおよびアニメーションモデルという2つのモデルの組み合わせによって実現されます。</p>
+
+<h2 id="Concepts_and_usage" name="Concepts_and_usage">概念と利用方法</h2>
+
+<p>Web Animation API は、 DOM 要素のアニメーションを記述する共通言語をブラウザーと開発者に提供します。 API の背景の概念や利用方法についての詳しい情報は、<a href="/ja/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API">Web Animation API の利用</a>をご覧ください。</p>
+
+<h2 id="Web_Animations_interfaces" name="Web_Animations_interfaces">ウェブアニメーションインターフェイス</h2>
+
+<dl>
+ <dt>{{domxref("Animation")}}</dt>
+ <dd>アニメーションノードやソースの再生制御やタイムラインを提供します。 {{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}} コンストラクターで作成されたオブジェクトを取ることができます。</dd>
+ <dt>{{domxref("KeyframeEffect")}}</dt>
+ <dd><strong>キーフレーム</strong>と呼ばれるアニメーション可能なプロパティと値の組み合わせ、及びその<a href="/ja/docs/Web/API/Web_Animations_API/Animation_timing_options">タイミングオプション</a>を記述します。これは {{domxref("Animation.Animation", "Animation()")}} コンストラクターを使用して再生することができます。</dd>
+ <dt>{{domxref("AnimationTimeline")}}</dt>
+ <dd>アニメーションのタイムラインを表します。このインターフェイスはタイムライン機能 ({{domxref("DocumentTimeline")}} などのタイムラインオブジェクト) を定義するために存在し、これ自体は開発者からはアクセスされません。</dd>
+ <dt>{{domxref("AnimationEvent")}}</dt>
+ <dd>実際には CSS アニメーションの一部です。</dd>
+ <dt>{{domxref("DocumentTimeline")}}</dt>
+ <dd>アニメーションのタイムラインを表し、既定の文書のタイムライン ({{domxref("Document.timeline")}} プロパティ) を含みます。</dd>
+ <dt>{{domxref("EffectTiming")}}</dt>
+ <dd>{{domxref("Element.animate()")}}, {{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly()")}}, {{domxref("KeyframeEffect.KeyframeEffect()")}} のすべてがタイミングプロパティの任意の連想配列オブジェクトを受け付けます。</dd>
+</dl>
+
+<h2 id="他のインターフェイスへの拡張">他のインターフェイスへの拡張</h2>
+
+<p>Web Animation API によって {{domxref("document")}} 及び {{domxref("element")}} に新たに追加された機能もあります。</p>
+
+<h3 id="Extensions_to_the_Document_interface" name="Extensions_to_the_Document_interface"><code>Document</code> インターフェイスの拡張</h3>
+
+<dl>
+ <dt>{{domxref("document.timeline")}}</dt>
+ <dd>既定の文書タイムラインを表す <code>DocumentTimeline</code> オブジェクトです。</dd>
+ <dt>{{domxref("document.getAnimations()")}}</dt>
+ <dd><code>document</code> 内で要素に対して現在有効な {{domxref("Animation")}} オブジェクトの配列を返します。</dd>
+ <dt>
+ <h3 id="Extensions_to_the_Element_interface" name="Extensions_to_the_Element_interface"><code>Element</code> インターフェイスの拡張</h3>
+ </dt>
+ <dt>{{domxref("Element.animate()")}}</dt>
+ <dd>要素のアニメーションを作成して再生するショートカットメソッドです。作成された {{domxref("Animation")}} オブジェクトのインスタンスを返します。</dd>
+ <dt>{{domxref("Element.getAnimations()")}}</dt>
+ <dd>{{domxref("Animation")}} オブジェクトの配列で、現在その要素に関連し、将来の実行が予定されているものを返します。</dd>
+</dl>
+
+<h2 id="Specifications" name="Specifications">仕様書</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')}}</td>
+   <td>{{Spec2('Web Animations')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API">Web Animation API の利用</a></li>
+ <li><a href="https://mozdevs.github.io/Animation-examples/">Web Animationのデモ</a></li>
+ <li><a href="https://github.com/web-animations/web-animations-js">Polyfill</a></li>
+ <li>Firefox の現在の実装: <a href="https://birtles.github.io/areweanimatedyet/">AreWeAnimatedYet</a></li>
+ <li>
+  <p><a href="http://codepen.io/danwilson/pen/xGBKVq">ブラウザーの対応のテスト</a></p>
+ </li>
+</ul>
diff --git a/files/ja/web/api/web_animations_api/using_the_web_animations_api/index.html b/files/ja/web/api/web_animations_api/using_the_web_animations_api/index.html
new file mode 100644
index 0000000000..05bf4a6312
--- /dev/null
+++ b/files/ja/web/api/web_animations_api/using_the_web_animations_api/index.html
@@ -0,0 +1,352 @@
+---
+title: Web Animations API を利用する
+slug: Web/API/Web_Animations_API/Using_the_Web_Animations_API
+tags:
+  - CSS
+  - JavaScript
+  - web animations api
+  - アニメーション
+  - キーフレーム
+  - 不思議の国のアリス
+  - 初心者
+translation_of: Web/API/Web_Animations_API/Using_the_Web_Animations_API
+---
+<p>{{DefaultAPISidebar("Web Animations")}}</p>
+
+<p class="summary">Web Animations API は JavaScript を使い、アニメーションを構築したりプレイバックを制御することが出来ます。この記事では「ふしぎの国のアリス」を利用した楽しいデモとチュートリアルで正しい利用方法を説明します。</p>
+
+<h2 id="Web_Animations_API_との出会い">Web Animations API との出会い</h2>
+
+<p><a href="/ja-JP/docs/Web/API/Web_Animations_API">Web Animations API</a> はブラウザ内のアニメーションエンジンを開発者にオープンにして JavaScript で制御します。この API は <a href="/ja-JP/docs/Web/CSS/CSS_Animations">CSS アニメーション</a> と <a href="/ja-JP/docs/Web/CSS/CSS_Transitions">CSS トランジション</a> の両方の実装基盤となるように設計されており、将来のアニメーション効果への扉を開いた状態にしています。これは現在サポートされているアニメーションを実行する中で、ハックや強制や {{domxref("Window.requestAnimationFrame()")}} を利用しない最もパフォーマンスの高い方法の1つです。</p>
+
+<p>Web Animations API を利用すると、インタラクティブなアニメーションをスタイルシートから JavaScript に移管し、表現と動作を分離できます。CSS プロパティを記述したり、再生方向を制御するためにエレメントにクラスを追加するなどの DOM を多用する手法に依存する必要がなくなりました。また、純粋な宣言した CSS とは異なり、JavaScript ではプロパティからアニメーション時間を動的に設定することが出来ます。カスタムされたアニメーションライブラリを構築し、インタラクティブなアニメーションを作るために、Web Animations API が最適なツールになることでしょう。では Web Animations API で何が出来るか説明しましょう。</p>
+
+<h2 id="ブラウザサポート">ブラウザサポート</h2>
+
+<p>この記事で説明する基本的な Web Animations API の機能は、Firefox 48 以降および Chrome 36 以降で標準機能として利用可能です。WebKit と Edge はこの API をそれぞれ TODO リストに移行しましたが、全てのブラウザでサポートされるまで、機能サポートをテストするために追加する <a href="https://github.com/web-animations/web-animations-js">polyfill</a> があるので必要に応じて追加します。</p>
+
+<h2 id="Web_Animation_API_を利用して_CSS_アニメーションを構築する">Web Animation API を利用して CSS アニメーションを構築する</h2>
+
+<p>Web Animations API を学習するためのより身近な手法は、多くの Web 開発者が以前に使用したことのある CSS アニメーションから始めることです。CSS アニメーションには、デモ目的でうまくブレイクダウンする使い慣れた構文を持っています。</p>
+
+<h3 id="CSS_バージョン">CSS バージョン</h3>
+
+<p>アリスがうさぎの穴からオチてワンダーランドに導かれる様子を示した CSS で書かれている転がり落ちるアニメーションです。(完全な <a href="http://codepen.io/rachelnabors/pen/QyOqqW">Codepen のコード</a> を参照してください)</p>
+
+<p><a href="http://codepen.io/rachelnabors/pen/rxpmJL"><img alt="Alice Tumbling down the rabbit's hole." src="https://mdn.mozillademos.org/files/13843/tumbling-alice_optimized.gif" style="display: block; height: 374px; margin-left: auto; margin-right: auto; width: 700px;"></a></p>
+
+<p>背景が移動しながら、アリスが回転し、回転からのオフセットで色が変化することに注目してください。このチュートリアルでは、アリスのみに焦点を当てます。アリスのアニメーションを制御する簡単な CSS は次のとおりです。</p>
+
+<pre class="brush: css notranslate">#alice {
+  animation: aliceTumbling infinite 3s linear;
+}
+
+@keyframes aliceTumbling {
+  0% {
+    color: #000;
+    transform: rotate(0) translate3D(-50%, -50%, 0);
+  }
+  30% {
+    color: #431236;
+  }
+  100% {
+    color: #000;
+    transform: rotate(360deg) translate3D(-50%, -50%, 0);
+  }
+}</pre>
+
+<p>これによって、アリスの色とトランスフォーム回転が 3 秒間にわたって一定(線形)で変化し、それを無限にループします。<a href="/ja-JP/docs/Web/CSS/@keyframes">@keyframes</a> ブロックで、各ループの 30% (約 0.9 秒) でアリスの色が黒から濃いワイン色に変わり、ループが終わるときにもとに戻ることが分かります。</p>
+
+<h3 id="JavaScript_に移行する">JavaScript に移行する</h3>
+
+<p>次に Web Animations API を利用して同じアニメーションを作成してみましょう。</p>
+
+<h4 id="キーフレームを表現する">キーフレームを表現する</h4>
+
+<p>最初に必要なことは、CSS の <a href="/ja-JP/docs/Web/CSS/@keyframes">@keyframes</a> ブロックに対応する <a href="/ja-JP/docs/Web/API/Web_Animations_API/Keyframe_Formats">Keyframe オブジェクト</a> を作成することです。</p>
+
+<pre class="brush: js notranslate">var aliceTumbling = [
+  { transform: 'rotate(0) translate3D(-50%, -50%, 0)', color: '#000' },
+  { color: '#431236', offset: 0.3},
+  { transform: 'rotate(360deg) translate3D(-50%, -50%, 0)', color: '#000' }
+];</pre>
+
+<p>ここでは、複数のオブジェクトを含む配列を使用しています。各オブジェクトは、オリジナルの CSS のキーを表現しています。ただし、CSS とは異なって Web Animations API には、表示される各キーのアニメーションに沿ったパーセンテージを明示的に伝える必要がありません。指定したキーの数に基き、アニメーションが自動的に均等な部分に分割します。つまり、3 つのキーを持つ Keyframe オブジェクトは、特に指定がない限り、アニメーションの各ループの途中で中間キーを 50 %として再生します。</p>
+
+<p>キーのオフセットを他のキーから明示的に設定する場合は、カンマで CSS キーの宣言と区切ったオフセットを直接オブジェクトに指定できます。上記の例では、色の変化に対してアリスの色が 30% (50% ではない) で変化するために <code>offset: 0.3</code> を指定しています。</p>
+
+<p>少なくとも 2 つのキーフレームを指定する必要があります。 (アニメーションシーケンスの開始状態・終了状態の 2 つを示す)キーフレームに 1 つのエントリーしか無い場合、{{domxref("Element.animate()")}} は <code>NotSupportedError</code> 例外をスローします。</p>
+
+<p>予約すると、キーのオフセットを指定しない限り、デフォルトでキーは等間隔になります。便利でしょうか？</p>
+
+<h4 id="タイミング_プロパティ_の表現">タイミング プロパティ の表現</h4>
+
+<p>また、アリスのアニメーションの値に対応するタイミングプロパティのオブジェクト ({{domxref("AnimationEffectTimingProperties")}}) を作成する必要があります。</p>
+
+<pre class="brush: js notranslate">var aliceTiming = {
+  duration: 3000,
+  iterations: Infinity
+}</pre>
+
+<p>CSS で同等の値の表現方法との違いに気がつくでしょう。</p>
+
+<ul>
+ <li>1 つ目は間隔時間はミリ秒単位で表現されています。3秒という指定ではなく、3000 ミリ秒です。{{domxref("WindowTimers.setTimeout()")}} や {{domxref("Window.requestAnimationFrame()")}} と同じように Web Animations API はミリ秒しか値を取りません。</li>
+ <li>もう 1 つは <code>iteration-count</code> ではなく <code>iterations</code> ということです。</li>
+</ul>
+
+<div class="note">
+<p>CSS アニメーションで使用される用語と Web Animations で利用される用語とではいくつか小さな違いがあります。例えば、Web Animationsは <code>"infinite"</code> という文字列を利用しない代わりに JavaScript の予約語である <code>Infinity</code> を利用します。そして、 <code>timing-function</code> の代わりに <code>easing</code> を利用します。デフォルトのt <a href="/ja-JP/docs/Web/CSS/animation-timing-function">animation-timing-function</a> が簡単な <code>ease</code> であるCSS アニメーションとは異なり、Web Animation API ではデフォルトのイージングは <code>linear</code> (線形)であるため、ここではイージング値をリストにしていません。</p>
+</div>
+
+<h4 id="パーツをまとめる">パーツをまとめる</h4>
+
+<p>次は {{domxref("Element.animate()")}} メソッドを利用して今までの 2 つの要素をまとめます。</p>
+
+<pre class="brush: js notranslate">document.getElementById("alice").animate(
+  aliceTumbling,
+  aliceTiming
+)</pre>
+
+<p>アニメーションが再生が開始されます！(<a href="http://codepen.io/rachelnabors/pen/rxpmJL">Codepen の完成バージョン</a>を参照してください。)</p>
+
+<p><code>animate()</code> メソッドは、CSS でアニメーション化出来る DOM 要素を用いて呼び出し可能です。そして、それはいくつかの方法で書くことが出来ます。キーフレームとタイミングプロパティを作成する代わりに、次のように直接渡すことが出来ます。</p>
+
+<pre class="brush: js notranslate">document.getElementById("alice").animate(
+  [
+    { transform: 'rotate(0) translate3D(-50%, -50%, 0)', color: '#000' },
+    { color: '#431236', offset: 0.3},
+    { transform: 'rotate(360deg) translate3D(-50%, -50%, 0)', color: '#000' }
+  ], {
+    duration: 3000,
+    iterations: Infinity
+  }
+);</pre>
+
+<p>さらに、アニメーションの間隔時間のみを指定し、繰り返さないアニメーションを指定する場合、ミリ秒だけを指定することが出来ます(デフォルトではアニメーションを 1 回だけ繰り返します)</p>
+
+<pre class="brush: js notranslate">document.getElementById("alice").animate(
+  [
+    { transform: 'rotate(0) translate3D(-50%, -50%, 0)', color: '#000' },
+    { color: '#431236', offset: 0.3},
+    { transform: 'rotate(360deg) translate3D(-50%, -50%, 0)', color: '#000' }
+  ], 3000);</pre>
+
+<h2 id="Play_pause_reverse_playbackRate_を使って再生制御する">Play() / pause() / reverse() / playbackRate を使って再生制御する</h2>
+
+<p>Web Animation API を使用して CSS アニメーションを作成することが可能ですが、API が本当に役立つ時はアニメーションの再生を制御するときです。Web Animation API は、再生を制御するための便利ないくつかのメソッドを提供しています。アリスが拡大/縮小するゲームでのアニメーションの一時停止と再生を見てみましょう( <a href="http://codepen.io/rachelnabors/pen/PNYGZQ">Codepen の完全なコード</a>をご覧ください。)<br>
+ <a href="http://codepen.io/rachelnabors/pen/PNYGZQ?editors=0010"><img alt="Playing the growing and shrinking game with Alice." src="https://mdn.mozillademos.org/files/13845/growing-shrinking_article_optimized.gif" style="display: block; height: 374px; margin-left: auto; margin-right: auto; width: 700px;"></a></p>
+
+<p>このゲームでは、アリスはちさなボトルから大きなボトルに移動するアニメーションを使用しており、ボトルとカップケーキを使い制御します。どちらにも独自のアニメーションがあります。</p>
+
+<h3 id="アニメーションの一時停止と再生">アニメーションの一時停止と再生</h3>
+
+<p>アリスのアニメーションについては後で詳しく説明します。まずはカップケーキのアニメーションを見てみましょう。</p>
+
+<pre class="brush: js notranslate">var nommingCake = document.getElementById('eat-me_sprite').animate(
+[
+  { transform: 'translateY(0)' },
+  { transform: 'translateY(-80%)' }
+], {
+  fill: 'forwards',
+  easing: 'steps(4, end)',
+  duration: aliceChange.effect.timing.duration / 2
+});</pre>
+
+<p>{{domxref("Element.animate()")}} メソッドは、呼び出された直後に実行されます。ユーザーがクリックする前にケーキが食べられないように、次のように定義された {{domxref("Animation.pause()")}} をすぐに呼び出します。</p>
+
+<pre class="brush: js notranslate">nommingCake.pause();</pre>
+
+<p>{{domxref("Animation.play()")}} メソッドを用いて準備出来たらいつでもアニメーションを実行できます。</p>
+
+<pre class="brush: js notranslate">nommingCake.play();</pre>
+
+<p>具体的には、カップケーキが食べられるにつれて、アリスのアニメーションにリンクしてアリスが大きくなるようにします。</p>
+
+<pre class="brush: js notranslate">var growAlice = function() {
+
+  // Play Alice's animation.
+  aliceChange.play();
+
+  // Play the cake's animation.
+  nommingCake.play();
+
+}</pre>
+
+<p>ユーザーがマウスを押したままにするか、タッチスクリーン上のケーキを指で押すと、<code>growAlice</code> を呼び出してアニメーションを再生できるようにしました。</p>
+
+<pre class="brush: js notranslate">cake.addEventListener("mousedown", growAlice, false);
+cake.addEventListener("touchstart", growAlice, false);</pre>
+
+<h3 id="その他の便利なメソッド">その他の便利なメソッド</h3>
+
+<p>一時停止と再生に加えて、次のアニメーションメソッドを利用することが出来ます。</p>
+
+<ul>
+ <li>{{domxref("Animation.finish()")}} はアニメーションの最後までスキップします。</li>
+ <li>{{domxref("Animation.cancel()")}} はアニメーションを中止し、そのエフェクトを削除します。</li>
+ <li>{{domxref("Animation.reverse()")}} を実行すると ({{domxref("Animation.playbackRate")}} に負数を設定し、アニメーションの再生方向を逆方向にします。</li>
+</ul>
+
+<p>最初に <code>playbackRate</code> を見てみましょう。負数の playbackRate はアニメーションを逆に実行させます。アリスがボトルから飲むと彼女は地位sかうなります。これは、ボトルが彼女のアニメーションの playbackRate を 1 から -1 に変更するためです。</p>
+
+<pre class="brush: js notranslate">var shrinkAlice = function() {
+  aliceChange.playbackRate = -1;
+  aliceChange.play();
+}
+
+bottle.addEventListener("mousedown", shrinkAlice, false);
+bottle.addEventListener("touchstart", shrinkAlice, false);</pre>
+
+<p><a href="https://ja.wikipedia.org/wiki/%E9%8F%A1%E3%81%AE%E5%9B%BD%E3%81%AE%E3%82%A2%E3%83%AA%E3%82%B9">鏡の国のアリス</a>では、アリスは走り続けなければならない世界に移動します。レッドクイーンのレースの例では、アリストレッドクイーンが所定の位置にとどまっています。(<a href="http://codepen.io/rachelnabors/pen/PNGGaV">Codepen の</a> 完全なコードを参照してください。)</p>
+
+<p><a href="http://codepen.io/rachelnabors/pen/PNGGaV"><img alt="Alice and the Red Queen race to get to the next square in this game." src="https://mdn.mozillademos.org/files/13847/red-queen-race_optimized.gif" style="display: block; height: 342px; margin-left: auto; margin-right: auto; width: 640px;"></a></p>
+
+<p>小さな子どもたちは、オートマトンのチェスのコマとは異なり、疲れやすいのでアリスは常に速度をとしています。彼女のアニメーションの <code>playbackRate</code> に衰えを設定することでコードでこれを表現しました。</p>
+
+<pre class="brush: js notranslate">setInterval( function() {
+
+  // Make sure the playback rate never falls below .4
+  if (redQueen_alice.playbackRate &gt; .4) {
+    redQueen_alice.playbackRate *= .9;
+  }
+
+}, 3000);</pre>
+
+<p>しかし、クリックまたはタップして彼らを励ますと、playbackRate を乗算しているのでスピードアップします。</p>
+
+<pre class="brush: js notranslate">var goFaster = function() {
+
+  redQueen_alice.playbackRate *= 1.1;
+
+}
+
+document.addEventListener("click", goFaster);
+document.addEventListener("touchstart", goFaster);</pre>
+
+<p>また、背景要素にはクリックまたｈタップしたときに影響を受ける<code>playbackRate</code> を設定しています。アリスとレッドクイーンを 2 倍早く走らせたらどうなると思いますか？速度を落とすとどうなると思いますか？</p>
+
+<h2 id="アニメーションから情報を取得する">アニメーションから情報を取得する</h2>
+
+<p>サイト全体のアニメーションを遅くすることで前庭障害のあるユーザーのアクセシビリティを改善するなど、playbackRate を使用する他の方法を想像してみてください。すべての CSS ルールで期間を再計算することなく CSS で全てを行うことは不可能ですが、Web Animations API では次の {{domxref("document.getAnimations()")}} メソッド(まだブラウザーでの完全なサポートではないですが) を使用して次のようにページ上の各アニメーションをループして <code>playbackRate</code> を半分にします。</p>
+
+<pre class="brush: js notranslate">document.getAnimations().forEach(
+  function (animation) {
+    animation.playbackRate *= .5;
+  }
+);</pre>
+
+<p>Web Animations API を利用すると、変更する必要があるのは 1 つの小さなプロパティだけです！</p>
+
+<p>CSS アニメーションだけでは難しいのは、他のアニメーションが提供する値に依存するときです。例えばアリスの拡大/縮小ゲームの例では、ケーキの間隔時間について奇妙な事に気づいたかもしれません。</p>
+
+<pre class="brush: js notranslate">duration: aliceChange.effect.timing.duration / 2</pre>
+
+<p>ここで何がおこっているか理解するために、アリスのアニメーションを見てみましょう。</p>
+
+<pre class="brush: js notranslate">var aliceChange = document.getElementById('alice').animate(
+  [
+    { transform: 'translate(-50%, -50%) scale(.5)' },
+    { transform: 'translate(-50%, -50%) scale(2)' }
+  ], {
+    duration: 8000,
+    easing: 'ease-in-out',
+    fill: 'both'
+  });</pre>
+
+<p>アリスのアニメーションでは、8秒かけてサイズが半分から  2 倍になります。その後、彼女のエフェクトを停止します。</p>
+
+<pre class="brush: js notranslate">aliceChange.pause();</pre>
+
+<p>アニメーションの最初に一時停止したままにすると、ボトル全体を既に飲んでいるかのようにフルサイズの半分から始めてしまいます。彼女のアニメーションの "playhead" を中央に設定したいので、彼女は既に半分終わっています。次のようにアリスの {{domxref("Animation.currentTime")}} を 4 秒に設定することでこれを設定することが出来ます。</p>
+
+<pre class="brush: js notranslate">aliceChange.currentTime = 4000;</pre>
+
+<p>しかし、アニメーションの作業中にアリスの間隔時間を大幅に変更する可能性があります。アリスの <code>currentTime</code> を動的に設定するとよいのではないでしょうか。従って、一度に 2 つの更新を行う必要はありません。実際のところ、aliceChange の {{domxref("Animation.effect")}} プロパティをあsン称することでこれを実行できます。プロパティはアクティブなエフェクトの全ての詳細を含むオブジェクトを返します。</p>
+
+<pre class="brush: js notranslate">aliceChange.currentTime = aliceChange.effect.timing.duration / 2;</pre>
+
+<p><code>effect</code> を利用すると、アニメーションの <code>keyframe</code> と <code>timing</code> オブジェクトにアクセスできます。<code>aliceChange.effect.timing</code> はアリスのタイミングオブジェクト({{domxref("AnimationEffectTimingReadOnly")}}) 型) を示します。これには、{{domxref("AnimationEffectTimingReadOnly.duration")}} も含まれます。<br>
+ アニメーションのタイムラインの中間点を取得するために、アリスの長さを半分に分割し、通常の身長に設定できます。アリアスのアニメーションを逆再生して、どちらの方向にも再生したり、小さくしたり、大きくしたり出来ます！</p>
+
+<p>また、ボトルとケーキの再生時間を設定するときにも同じことが出来ます。</p>
+
+<pre class="brush: js notranslate">var drinking = document.getElementById('liquid').animate(
+[
+  { height: '100%' },
+  { height: '0' }
+], {
+  fill: 'forwards',
+  duration: aliceChange.effect.timing.duration / 2
+});
+drinking.pause();</pre>
+
+<p>これで、3 つのアニメーションすべてが 1 つの間隔時間に繋がり、1 つの場所から簡単に変更することが出来ます。</p>
+
+<p>Web Animation API を利用して、アニメーションの現在の時刻を把握することも出来ます。ケーキを食べてなくなったり、ボトルが空になるとゲームが終了します。アリスが大きすぎてドアを通らなかったり、小さすぎてドアノブに届かなかったかはアリスのアニメーションによって表現されプレイヤーの操作に依存します。アリスのアニメーションの<code><a href="/ja-JP/docs/Web/API/Animation/currentTime">currentTime</a></code> を取得して、彼女の <code>activeDuration</code> で割ることで彼女の大きさを把握できます。</p>
+
+<pre class="brush: js notranslate">var endGame = function() {
+
+  // get Alice's timeline's playhead location
+  var alicePlayhead = aliceChange.currentTime;
+  var aliceTimeline = aliceChange.effect.activeDuration;
+
+  // stops Alice's and other animations
+  stopPlayingAlice();
+
+  // depending on which third it falls into
+  var aliceHeight = alicePlayhead/aliceTimeline;
+
+  if (aliceHeight &lt;= .333){
+    // Alice got smaller!
+    ...
+
+  } else if (aliceHeight &gt;= .666) {
+    // Alice got bigger!
+    ...
+
+  } else {
+    // Alice didn't change significantly
+    ...
+
+  }
+}
+</pre>
+
+<div class="note">
+<p><strong>注意:</strong><code>getAnimations()</code> と <code>effect</code> はこの記事執筆時点では完全にサポートされていませんが plyfill は今現在サポートしています。</p>
+</div>
+
+<h2 id="コールバックと_Promise">コールバックと Promise</h2>
+
+<p>CSS アニメーションとトランジションには独自のイベントリスナーがあり、これらは Web Animations API でも利用可能です。</p>
+
+<ul>
+ <li><code><a href="/ja-JP/docs/Web/API/Animation/onfinish">onfinish</a></code> は終了イベントハンドラーであり、<code><a href="/ja-JP/docs/Web/API/Animation/finish">finish()</a></code> メソッドを使用して手動でトリガー出来ます。</li>
+ <li><code><a href="/ja-JP/docs/Web/API/Animation/oncancel">oncancel</a></code> は <code>cancel</code> のイベントハンドラーであり、<code><a href="/ja-JP/docs/Web/API/Animation/cancel">cancel()</a></code> メソッドを使用してトリガーできます。</li>
+</ul>
+
+<p>ここでは、ケーキ・ボトル・アリスのコールバックを設定して、<code>endGame</code> 関数を起動します。</p>
+
+<pre class="brush: js notranslate">// When the cake or runs out...
+nommingCake.onfinish = endGame;
+drinking.onfinish = endGame;
+
+// ...or Alice reaches the end of her animation
+aliceChange.onfinish = endGame;
+
+</pre>
+
+<p>さらに良いことに、Web Animations APIではアニメーション終了時に解決されるか、またはキャンセル時に拒否される <code><a href="/docs/Web/API/Animation/finished">finished</a></code> プロミスを提供しています。</p>
+
+<h2 id="まとめ">まとめ</h2>
+
+<p>これらの機能は Web Animations API の基本機能であって、その殆どは Firefox と Chrome の最新バージョンで既にサポートされています。これで、ブラウザ上で「うさぎの穴を飛び降りる」アニメーション化の準備は整い、独自のアニメーション実験を作成する準備が出来ました。API を使用して共有したい場合は、#WAAPI ハッシュタグを使ってみてください。サポートのつながりによっては、さらなる機能をカバーするチュートリアルを書いていくのでチェックしてください！</p>
+
+<h2 id="参考">参考</h2>
+
+<ul>
+ <li class="post__title"><a href="http://codepen.io/collection/bpEza/">Codepen の不思議の国のアリス</a> を使い、フォーク・シェアしてください。</li>
+ <li class="post__title"><a href="https://hacks.mozilla.org/2016/08/animating-like-you-just-dont-care-with-element-animate/">Element.animte を気にしないようにアニメーションする方法</a>：Web Animations API の作られた背景・他のアニメーション手法よりパフォーマンスが優れている理由を説明した秀逸な記事です。</li>
+ <li class="post__title"><a href="https://github.com/web-animations/web-animations-js">web-animations-js</a> ： Web Animations API の polyfill です。</li>
+</ul>