---
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>