initial commit

2 files changed, 453 insertions, 0 deletions

diff --git a/files/ru/web/api/web_animations_api/index.html b/files/ru/web/api/web_animations_api/index.html
new file mode 100644
index 0000000000..bb8ac2a631
--- /dev/null
+++ b/files/ru/web/api/web_animations_api/index.html
@@ -0,0 +1,100 @@
+---
+title: Web Animations API
+slug: Web/API/Web_Animations_API
+translation_of: Web/API/Web_Animations_API
+---
+<p>{{DefaultAPISidebar("Веб-анимация")}} {{SeeCompatTable()}}</p>
+
+<div class="summary">
+<p>API веб-анимации позволяет синхронизировать и сроки изменения представления веб-страницы, то есть анимации элементов DOM. Она делает это путем объединения двух моделей: Модель синхронизации и анимации модели.</p>
+</div>
+
+<h2 id="Основные_понятия_и_использование_API">Основные понятия и использование API</h2>
+
+<p>Web Animations API (API веб-анимации) обеспечивает общий язык для браузеров и разработчиков для описания анимации элементов DOM. Для более подробной информации о концепциях, заложенных в API, и о его использовании, прочтите статью <a href="/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API">Использование Web Animations API </a> .</p>
+
+<h2 id="Интерфейсы_веб-анимации">Интерфейсы веб-анимации</h2>
+
+<dl>
+</dl>
+
+<dl>
+ <dt>{{Domxref("Animation")}}</dt>
+ <dd>Обеспечивает элементы управления воспроизведением и временную шкалу для узла анимации или источника. Можно взять объект, созданный с помощью {{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}} конструктор.</dd>
+ <dt>{{Domxref("KeyframeEffect")}}</dt>
+ <dd>Описывает наборы анимируемых свойств и значений, называемых  <strong>ключевыми кадрами</strong> и их <a href="/en-US/docs/Web/API/Web_Animations_API/Animation_timing_options">параметры синхронизации </a><strong>. </strong> Они могут затем быть воспроизведены с помощью {{domxref("Animation.Animation", " Animation()")}} конструктор.</dd>
+ <dt>{{Domxref("AnimationTimeline")}}</dt>
+ <dd>Представляет график анимации. Этот интерфейс существует, чтобы определить особенности временной шкалы (наследуемые интерфейсом {{domxref("DocumentTimeline")}} и другими интерфейсами в будущем) и не предназначен для непосредственного использования разработчиками.</dd>
+ <dt>{{Domxref("DocumentTimeline")}}</dt>
+ <dd>Представляет временные рамки анимации, в том числе временные рамки анимации по умолчанию для документа (через свойство {{domxref("Document.timeline")}}).</dd>
+ <dt>{{Domxref("AnimationEffectTiming")}}</dt>
+ <dd>Объект, содержащий временные свойства, возвращенные {{domxref("KeyframeEffect.timing", "сроки")}} атрибут {{domxref("KeyframeEffect")}}. Он наследует свои свойства от {{domxref("AnimationEffectTimingReadOnly")}}, но в не только чтение формы.</dd>
+ <dt>{{Domxref("SharedKeyframeList")}}</dt>
+ <dd>Представляет собой последовательность ключевых кадров , которые могут быть разделены между {{domxref("KeyframeEffect")}} объектов. Используя <code>SharedKeyframeList</code>объекты, несколько <code>KeyframeEffect</code>объектов могут повторно использовать одни и те же ключевые кадры , не заплатив стоимость разбора их несколько раз.</dd>
+ <dt>{{domxref("AnimationEffectTimingProperties")}}</dt>
+ <dd>{{Domxref("Element.animate()")}}, {{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly()")}} и {{domxref("KeyframeEffect.KeyframeEffect()")}} все принимают необязательный словарь объект синхронизации свойств.</dd>
+</dl>
+
+<h2 id="Расширения_для_других_интерфейсов">Расширения для других интерфейсов</h2>
+
+<p>API веб - анимации добавляет некоторые новые функции в <strong style="font-size: 14px; font-weight: 700; line-height: 1.5;">{{domxref("документ")}}</strong> и  <strong style="font-size: 14px; font-weight: 700; line-height: 1.5;">{{domxref("элемент")}}.</strong></p>
+
+<h3 id="Расширения_Documentинтерфейса">Расширения <code>Document</code>интерфейса</h3>
+
+<dl>
+ <dt>{{Domxref("document.timeline")}}</dt>
+ <dd><code>DocumentTimeline</code>Объект , представляющий документ по умолчанию временную шкалу.</dd>
+ <dt>{{Domxref("document.getAnimations()")}}</dt>
+ <dd>Возвращает массив {{domxref("Анимация")}} объектов в настоящее время действуют на элементах в <code>document</code>.</dd>
+ <dt>
+ <h3 id="Расширения_Elementинтерфейса">Расширения <code>Element</code>интерфейса</h3>
+ </dt>
+ <dt>{{Domxref("Element.animate()")}}</dt>
+ <dd>Способ быстрого доступа для создания и воспроизведения анимации на элементе. Она возвращает созданный {{domxref("Анимация")}} экземпляра объекта.</dd>
+</dl>
+
+<dl>
+</dl>
+
+<h2 id="Веб-анимация_для_чтения_только_интерфейсы">Веб-анимация для чтения только интерфейсы</h2>
+
+<p>Следующие интерфейсы включены в спецификации для таких целей, как определение функции, используемые в нескольких других местах, или служить в качестве основы для нескольких интерфейсов, которые могут быть использованы в качестве значений одних и тех же свойств. Вы бы не напрямую использовать их в работе веб-разработки, но они могут быть интересны для авторов библиотеки, чтобы понять, как эта технология работает, так что их реализации могут быть более эффективными, или для инженеров браузеров, которые ищут более легкой ссылки, чем спецификация обеспечивает.</p>
+
+<dl>
+ <dt>{{Domxref("AnimationEffectTimingReadOnly")}}</dt>
+ <dd>Словарь объект временных свойств, которые наследуются изменяемом {{domxref("AnimationEffectTiming")}} интерфейс, связанный с {{domxref("KeyframeEffect")}}.</dd>
+ <dt>{{Domxref("AnimationEffectReadOnly")}}</dt>
+ <dd>Определяет текущие и будущие "Анимационные эффекты" , как {{domxref("KeyframeEffect")}}, который может быть передан {{domxref("Анимация")}} объектов для воспроизведения, и {{domxref("KeyframeEffectReadOnly")}} который используется {{domxref("KeyframeEffect")}} (наследуется <a href="/en-US/docs/Web/CSS/CSS_Animations">CSS Animations</a> и <a href="/en-US/docs/Web/CSS/CSS_Transitions">Transitions</a> ). Все значения {{domxref("Animation.effect")}} имеют типов на основе <code>AnimationEffectReadOnly</code>.</dd>
+ <dt>{{Domxref("KeyframeEffectReadOnly")}}</dt>
+ <dd>Описывает наборы Animatable свойств и значений, которые могут быть воспроизведены с помощью {{domxref("Animation.Animation", "анимация()")}} конструктор, и которые унаследованы {{domxref("KeyframeEffect")}}. </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 Анимации')}}</td>
+   <td>{{Spec2 ( 'Web Анимации')}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API">Использование веб-API Animations</a></li>
+ <li><a href="https://mozdevs.github.io/Animation-examples/">Web демки Анимации</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/ru/web/api/web_animations_api/using_the_web_animations_api/index.html b/files/ru/web/api/web_animations_api/using_the_web_animations_api/index.html
new file mode 100644
index 0000000000..78975958c6
--- /dev/null
+++ b/files/ru/web/api/web_animations_api/using_the_web_animations_api/index.html
@@ -0,0 +1,353 @@
+---
+title: Using the Web Animations API
+slug: Web/API/Web_Animations_API/Using_the_Web_Animations_API
+tags:
+  - Анимация
+translation_of: Web/API/Web_Animations_API/Using_the_Web_Animations_API
+---
+<p>{{DefaultAPISidebar("Web Animations")}}</p>
+
+<p class="summary">Web Animations API позволяет нам создать анимацию и управлять её воспроизведением с помощью JavaScript. Эта статья будет правильным руководством для старта c веселыми демками и уроками с Алисой в Стране Чудес.</p>
+
+<h2 id="Встречайте_Web_Animations_API">Встречайте Web Animations API</h2>
+
+<p>В <a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a> открывает анимацию на движке браузеров для разработчиков и манипуляции через (с помощью) JavaScript.<br>
+ Этот API был разработан в основе реализации <a href="/en-US/docs/Web/CSS/CSS_Animations">CSS Animations</a> и <a href="/en-US/docs/Web/CSS/CSS_Transitions">CSS Transitions</a>, и оставлял свободу движений для будущих анимационных эффектов. Это один из самых эффективных способов анимации, поддерживаемой в Интернете, позволяя браузеру сделать свою собственную внутреннюю оптимизацию без хаков, принуждения, или {{domxref("Window.requestAnimationFrame()")}}.</p>
+
+<p>С Web Animations API, мы можем управлять интерактивной анимацией со стилями  JavaScript, отделяя представление от действия. Нам больше не нужно полагаться  на DOM-heavy методики написания CSS свойств и обзорных классов для элементов контроля воспроизведения направления. И в отличии от чисто декларативного CSS, JavaScript также позволяет устанавливать динамические значения свойств и их продолжительность. Для создания пользовательских библиотек и интерактивной анимации Web Animations API может стать прекрасным инструментом в работе. Давайте посмотрим, что он может сделать!</p>
+
+<h2 id="Поддержка_Браузеров">Поддержка Браузеров</h2>
+
+<p>Основы и компоненты Web Animations API, описанные в этой статье доступны в Firefox 48+ и Chrome 36+. Webkit и Edge перешли на  API соответственно, но пока нет полной поддержки во всех браузерах, есть удобная служба проверки <a href="https://github.com/web-animations/web-animations-js">handy maintained polyfill</a> которая тестирует и добавляет ее при необходимости.</p>
+
+<h2 id="Написание_CSS_Animations_вместе_с_Web_Animations_API">Написание CSS Animations вместе с Web Animations API</h2>
+
+<p>Самый простой способ в обучении Web Animations API это начать с чего начинало большинство веб-разработчиков: CSS Animations. В CSS Animations есть знакомый синтаксис, который хорошо раскрывает структуры демонстрационных примеров.</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="/en-US/docs/Web/CSS/@keyframes">@keyframes</a> блоке мы видим, что 30%  из всего цикла (около 9 секунд), цвет Алисы меняется от черного до насыщенного бордового, а потом снова в черный к концу цикла.</p>
+
+<h3 id="Движение_в_JavaScript">Движение в JavaScript</h3>
+
+<p>Теперь давайте попробуем создать такую же анимацию с Web Animations API.</p>
+
+<h4 id="Представляя_кадры">Представляя кадры</h4>
+
+<p>В первую очередь мы должны сосздать <a href="/en-US/docs/Web/API/Web_Animations_API/Keyframe_Formats">Keyframe Object</a> соответствующего нашему CSS <a href="/en-US/docs/Web/CSS/@keyframes">@keyframes</a> блоку:</p>
+
+<pre class="brush: js notranslate">var aliceTumbling = [
+  { transform: 'rotate(0) translate3D(-50%, -50%, 0)', color: '#000' },
+  { color: '#431236', offset: 0.333},
+  { transform: 'rotate(360deg) translate3D(-50%, -50%, 0)', color: '#000' }
+];</pre>
+
+<p>Здесь мы используем массив, содержащий несколько объектов. Каждый объект представляет собой код от оригинального CSS. Однако, в отличие от CSS, Web Animations API не нужно назначать точные проценты по анимации для каждого открывающего кода. Он автоматически разделит анимацию на равные части в соответствии с количеством кодов, которые вы ему даете. Это означает, что объект Keyframe с тремя кодами будет воспроизводить средний код 50% времени через каждый цикл анимации если не указано иное.</p>
+
+<p>Если мы хотим, чтобы определенный набор кода смещался относительного другого кода, мы можем указать смещение непосредственно на объекте который будет меняться, отделив значение запятой. В приведенном выше примере видно, чтобы цвет Алисы менялся на 30%, а не на 50% всего цикла, мы задаем смещение: 0,333.</p>
+
+<p>Там должно быть как минимум два кадра (представляющих начало и конец анимации). Если в вашем списке keyframe только одна запись, {{domxref("Element.animate()")}} то анимация выполняться не будет, вы получите ошибку NotSupportedError exception.</p>
+
+<p>И так повторим, код равномерно распределен по умолчанию, если не указано смещение. Удобно, не так ли?</p>
+
+<h4 id="Представление_свойства_времени.">Представление свойства времени.</h4>
+
+<p>Мы также должны создать объекту временные свойства (an {{domxref("AnimationEffectTimingProperties")}} object) соответствующие значению анимации Алисы:</p>
+
+<pre class="brush: js notranslate">var aliceTiming = {
+  duration: 3000,
+  iterations: Infinity
+}</pre>
+
+<p>Вы увидите здесь несколько отличий того, как соответствующие значения представлены в CSS:</p>
+
+<ul>
+ <li>Во-первых, длительность в миллисекундах, в отличии от секунд - 3000, а не 3с. Как {{domxref("WindowTimers.setTimeout()")}} и {{domxref("Window.requestAnimationFrame()")}}, Web Animations API использует только миллисекунды.</li>
+ <li>Во-вторых, что вы заметили, что он итерационный (повторяется), а не счетчик повторений.</li>
+</ul>
+
+<div class="note">
+<p>Существует ряд небольших различий между терминологией, используемой в анимации CSS и терминологии, которая используется в веб-анимации. Например, веб-анимации не используется строка "бесконечное", а вместо этого использует JavaScript код бесконечность. И вместо временной-функции мы используем ослабление. Мы не будем перечислять здесь значение ослабления, потому что, в отличие от CSS анимации, где по умолчанию <a href="/en-US/docs/Web/CSS/animation-timing-function">animation-timing-function</a> это просто, в веб-анимации API для ослаблеия по умолчанию используется линейная зависимость - котрые мы используем здесь</p>
+</div>
+
+<h4 id="Собираем_части_вместе.">Собираем части вместе.</h4>
+
+<p>Сейчас соберем все части вместе используя {{domxref("Element.animate()")}} метод:</p>
+
+<pre class="brush: js notranslate">document.getElementById("alice").animate(
+  aliceTumbling,
+  aliceTiming
+)</pre>
+
+<p>И вуаля, анимация работает(смотрите готовый вариант на <a href="http://codepen.io/rachelnabors/pen/rxpmJL">version on Codepen</a>).</p>
+
+<p>The <code>animate()</code> метод может быть применен на любой DOM-элемент, который может быть анимирован с помощью CSS. И он может быть записан несколькими способами. Вместо того, чтобы делить объекты на ключевые кадры и временные характеристики, мы могли бы просто передать свои значения непосредственно вот так:</p>
+
+<pre class="brush: js notranslate">document.getElementById("alice").animate(
+  [
+    { transform: 'rotate(0) translate3D(-50%, -50%, 0)', color: '#000' },
+    { color: '#431236', offset: 0.333},
+    { transform: 'rotate(360deg) translate3D(-50%, -50%, 0)', color: '#000' }
+  ], {
+    duration: 3000,
+    iterations: Infinity
+  }
+);</pre>
+
+<p>Более того, если мы хотели указать только длительность анимации, а не ее повторение (по умолчанию анимации повторяется один раз), мы могли бы пройтись только по миллисекундам:</p>
+
+<pre class="brush: js notranslate">document.getElementById("alice").animate(
+  [
+    { transform: 'rotate(0) translate3D(-50%, -50%, 0)', color: '#000' },
+    { color: '#431236', offset: 0.333},
+    { transform: 'rotate(360deg) translate3D(-50%, -50%, 0)', color: '#000' }
+  ], 3000);</pre>
+
+<h2 id="Управление_воспроизведением_с_помощью_play_pause_reverse_and_playbackRate">Управление воспроизведением с помощью play(), pause(), reverse() and playbackRate</h2>
+
+<p>Хотя мы можем писать CSS анимацию с Web Animations API, где API действительно хорошо подходит в качестве воздействия для воспроизведения анимации. Web Animations API обеспечивает несколько удобных методов для контроля воспроизведения анимации. Давайте посмотрим на паузу и воспроизведение анимации в росте/уменьшении Алисы в игре (провериить полный код можно на сайте <a href="http://codepen.io/rachelnabors/pen/PNYGZQ">full code on Codepen</a>):</p>
+
+<p><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>Когда пользователь поместит указатель мыши вниз или нажимает пальцем на торт на сенсорном экране, мы можем вызвать growAlice, чтобы выполнить все анимации:</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>Давайте посмотрим на первый playbackRate— отрицательное значение будет запускать анимацию в обратном направлении. Когда Алиса пьет из бутылки, она становится меньше. Это происходит потому, что бутылка изменяет ее анимацию 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://en.wikipedia.org/wiki/Through_the_Looking-Glass">Through the Looking-Glass</a>, Алиса путешествует по миру, где должна бежать, чтобы оставаться на месте и бежать в двое быстрее, чтобы двигаться вперед. Например в гонке с Красной королевой, Алиса и Красная королева бегут, чтобы оставаться на месте (проверить полный код можно на <a href="http://codepen.io/rachelnabors/pen/PNGGaV">full code on 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>Так как маленькие дети легко устают, в отличии от шахматных фигур, Алиса постоянно замедляется. Мы отобразили это в коде путем ослабления (уменьшения скорости) playbackRate анимации.</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>Фон также ускоряется при щелчках мыши или касаниях. Что же происходит, когда вы заставляете Алису и Красную королеву бежать в два раза быстрее? Что происходит, когда они тормозят?</p>
+
+<h2 id="Получение_информации_из_анимации">Получение информации из анимации</h2>
+
+<p>Представьте, что мы могли бы использовать playbackRate, как улучшения доступности сайта для пользователей с вестибулярными расстройствами, позволяя им замедлить анимацию на всех страницах сайта. Это невозможно сделать с помощью CSS без пересчета длительности в каждом правиле CSS, но с веб-анимации API, мы могли бы использовать в будущем (пока не поддерживается в браузерах!) Метод {{domxref("document.getAnimations()")}} систему циклов по каждой анимации на странице и сократить скорость анимации вот так:</p>
+
+<pre class="brush: js notranslate">document.getAnimations().forEach(
+  function (animation) {
+    animation.playbackRate *= .5;
+  }
+);</pre>
+
+<p>С Web Animations API нужно изменить только одно свойство.</p>
+
+<p>Другое дело, что это трудно делать только с CSS Animations, создавать зависимости от значения предусмотренные для других анимации. В примере игры про рост и уменьшение Алисы, вы можете заметить некоторые странности у кекса:</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 секунд. Затем мы останавливаем ее:</p>
+
+<pre class="brush: js notranslate">aliceChange.pause();</pre>
+
+<p>Если бы оставили ее на паузе в начале анимации , то Алиса увеличилась бы в два раза, когда выпила бы всю бутылку. Мы хотим остановить ее анимацию "воспроизведение" в середине, когда она уже на половину выполнена. Мы могли бы это сделать, установив {{domxref("Animation.currentTime")}} 4 секунды, вот так:</p>
+
+<pre class="brush: js notranslate">aliceChange.currentTime = 4000;</pre>
+
+<p>Но во время работы над этой анимацией мы можем сильно увеличить ее продолжительность. Разве не лучше установить динамическое изменение времени (currentTime), тогда нам не придется делать два обновления за один раз. Мы можем это сделать с помощью ссылки на изменение свойства размера Алисы (aliceChange) {{domxref("Animation.effect")}} который возвращает все детали и действующие эффекты, содержащиеся в объекте, на Алису:</p>
+
+<pre class="brush: js notranslate">aliceChange.currentTime = aliceChange.effect.timing.duration / 2;</pre>
+
+<p>эффекты позволяют нам получить доступ к анимации keyframe (кадров) и синхронности объектов - aliceChange.effect.timing , указывающий на время Алисиных элементов (котрые имеют тип {{domxref("AnimationEffectTimingReadOnly")}}) — в этом содержиться ее {{domxref("AnimationEffectTimingReadOnly.duration")}}. Мы можем распределить ее длительность на два раза, чтобы получить среднюю точку во временной шкале для установки нормального роста.</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>И мы можем сделать тоже самое при установки длительности анимации на кексе или бутылке.</p>
+
+<p>Теперь все три анимации связаны только с одной продолжительности, и мы можем легко переходить из одного места.</p>
+
+<p>Мы также можем использовать веб-анимации API, чтобы выяснить Текущее время анимации. Игра заканчивается, когда вы бежите от съеденого торта или выпитой бутылки. Изображение у игрока будет зависить от анимации Алисы. Стала ли она слишком большой на фоне крошечной двери и не может в нее пройти или слишком маленькой и не может достать ключ, чтобы открыть дверь. Мы можем выяснить, стала она большой или маленький в конце ее анимация, получая текущее время ее анимации <code><a href="/en-US/docs/Web/API/Animation/currentTime">currentTime</a></code> и разделив ее на activeDuration:</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> и эффект не полностью поддерживаются на момент написания этой статьи, но polyfill  поддерживает их уже сегодня.</p>
+</div>
+
+<h2 id="Обратные_вызовы_и_обещания">Обратные вызовы и обещания</h2>
+
+<p>CSS Animations и Transitions (переходы) имеют свои события и они также могут быть воспроизведены и в Web Animations API:</p>
+
+<ul>
+ <li><code><a href="/en-US/docs/Web/API/Animation/onfinish">onfinish</a></code> это обработчик событий для завершения события и он может быть запущена вручную в функйи/команды <code><a href="/en-US/docs/Web/API/Animation/finish">finish()</a></code>.</li>
+ <li><code><a href="/en-US/docs/Web/API/Animation/oncancel">oncancel</a></code> это обработчик для отмены события и может быть запуен с помощью функции/команды <code><a href="/en-US/docs/Web/API/Animation/cancel">cancel()</a></code>.</li>
+</ul>
+
+<p>Здесь мы устанавливаем обратный вызов для бутылки, кекса и Алисы, чтобы запустить функцию endGame.</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="/en-US/docs/Web/API/Animation/onfinish">onfinish</a></code> и <code><a href="/en-US/docs/Web/API/Animation/oncancel">oncancel</a></code>.</p>
+
+<div class="note">
+<p>Эти обещания не полностью поддерживаются в настоящий момент.</p>
+</div>
+
+<h2 id="Заключение">Заключение</h2>
+
+<p>Таковы основные особенности веб-анимации API, большинство из которых уже поддерживается в последних версиях Firefox и Chrome. К этому моменту вы должны быть готовы к "прыжку в кроличью нору" анимации в браузере и готовы написать свои собственные эксперименты в анимации! Если вы используете API и хотите поделиться, попробуйте использовать хэштег #WAAPI. Мы будем следить и писать другие учебники, чтобы охватить будущие дополнительные функции, в виде поддержки распространяя!</p>
+
+<h2 id="Посмотрите_также">Посмотрите также</h2>
+
+<ul>
+ <li class="post__title"><a href="http://codepen.io/collection/bpEza/">Полный набор Алиса в Стране Чудес демки</a> на сайт codepen для вас, чтобы играть, развиваться и делиться</li>
+ <li class="post__title"><a href="https://hacks.mozilla.org/2016/08/animating-like-you-just-dont-care-with-element-animate/">Animating like you just don’t care with Element.animate</a> — отличная статья, чтобы прочитать, где объясняется больше на фоне веб-анимации API, и поэтому он является более эффективным, чем другие методы веб-анимации</li>
+ <li class="post__title"><a href="https://github.com/web-animations/web-animations-js">web-animations-js</a> — the Web Animations API polyfill</li>
+</ul>