---
title: Element.animate()
slug: Web/API/Element/animate
tags:
  - API
  - Animation
  - Element
  - Experimental
  - Method
  - Reference
  - web animation
translation_of: Web/API/Element/animate
---
<div>{{APIRef('Web Animations')}} {{SeeCompatTable}}</div>

<p>Метод <strong><code>animate()</code> </strong>интерфейса<strong> </strong>{{domxref("Element")}} это быстрый способ создания {{domxref("Animation")}}, которая сразу применяется к элементу, а затем проигрывает эту анимацию. Метод возвращает созданный экземпляр класса {{domxref("Animation")}}.</p>

<div class="note">
<p>Элементы  могут иметь несколько, прикреплённых к ним, анимаций. Вы можете получить список анимаций, которые влияют на элемент, вызвав {{domxref("Element.getAnimations()")}}.</p>
</div>

<h2 id="Синтаксис">Синтаксис</h2>

<pre class="syntaxbox">var <em>animation</em> = element.animate(<em>keyframes</em>, <em>options</em>); </pre>

<h3 id="Параметры">Параметры</h3>

<dl>
 <dt><code>keyframes</code></dt>
 <dd>
 <p>Массив объектов ключевых кадров, <strong>либо </strong>объект ключевого кадра, свойства которого являются массивами значений для итерации. Смотрите <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Keyframe_Formats">Keyframe Formats</a> для получения подробной информации.</p>
 </dd>
 <dt><code>options</code></dt>
 <dd>Целое число<strong>, представляющее продолжительность анимации </strong>(в миллисекундах), <strong>или</strong> объект, содержащий одно или более временных свойств.</dd>
 <dd>
 <dl>
  <dt><code>id {{optional_inline}}</code></dt>
  <dd>Свойство уникальное для <code>animate()</code>: <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String.">DOMString</a></code>, с помощью которого можно ссылаться на анимацию.</dd>
 </dl>
 {{Page("ru/docs/Web/API/EffectTiming", "Свойства")}}</dd>
</dl>

<h4 id="Будущие_возможности">Будущие возможности</h4>

<p>Следующие возможности в настоящее <strong>нигде не поддерживаются</strong>, но будут добавлены в <strong>ближайшем будущем </strong>.</p>

<dl>
 <dt><code>composite {{optional_inline}}</code></dt>
 <dd>Определяет, как значения объединяются между этой анимацией и другими отдельными анимациями, которые не задают свою собственную конкретную составную операцию. По умолчанию <code>replace</code>.
 <ul>
  <li><code>add</code> диктует аддитивный эффект, где каждая последующая итерация строится на последней. Пример с <code>transform</code>, <code>translateX(-200px)</code> не будут переопределять ранний вариант со значением <code>rotate(20deg)</code>, поэтому результат будет <code>translateX(-200px) rotate(20deg)</code>.</li>
  <li><code>accumulate</code> схоже, но немного умнее: <code>blur(2)</code> и <code>blur(5)</code> станет <code>blur(7)</code>, а не <code>blur(2) blur(5)</code>.</li>
  <li><code>replace</code> переписывает предыдущие значения на новые.</li>
 </ul>
 </dd>
 <dt><code>iterationComposite {{optional_inline}}</code></dt>
 <dd>Определяет как значения строятся от итерации к итерации в этой анимации. Может быть установлено как <code>accumulate</code> или <code>replace</code> (смотрите выше). По умолчанию <code>replace</code>.</dd>
 <dt><code>spacing {{optional_inline}}</code></dt>
 <dd>Определяет как ключевые кадры, без временных смещений, должны распределяться по всей длительности анимации. По умолчанию <code>distribute</code>.
 <ul>
  <li><code>distribute</code> позиционирует ключевые кадры так, чтобы разница между последующими смещениями ключевых кадров была равна, то есть без каких-либо смещений, ключевые кадры будут равномерно распределены по всему времени проигрыша анимации.</li>
  <li><code>paced</code> позиционирует ключевые кадры так, чтобы расстояние между последующими значениями заданного темпового свойства было равным, то есть, чем больше разница в значениях свойств ключевых кадров, тем на большем расстоянии они расположены друг от друга.</li>
 </ul>

 <p><img alt="" src="https://w3c.github.io/web-animations/img/spacing-distribute.svg" style="height: 210px; width: 200px;"> <img alt=" " src="https://w3c.github.io/web-animations/img/spacing-paced.svg" style="height: 210px; width: 200px;"></p>
 </dd>
</dl>

<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>

<p>Возвращает {{domxref("Animation")}}.</p>

<h2 id="Пример">Пример</h2>

<p>В демо <a href="https://codepen.io/rachelnabors/pen/rxpmJL/?editors=0010">Down the Rabbit Hole (with the Web Animation API)</a>, мы используем удобный метод <code>animate()</code>, чтобы сразу создать и проиграть анимацию на элементе <code>#tunnel</code>, чтобы заставить его крутиться в падении, бесконечно. Обратите внимание на массив объектов, в котором переданы ключевые кадры, а также блок временных параметров.</p>

<pre class="brush: js">document.getElementById("tunnel").animate([
  // keyframes
  { transform: 'translate3D(0, 0, 0)' },
  { transform: 'translate3D(0, -300px, 0)' }
], {
  // timing options
  duration: 1000,
  iterations: Infinity
})
</pre>

<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-animatable-interface', 'animate()' )}}</td>
   <td>{{Spec2('Web Animations')}}</td>
   <td>Первоначальное определение</td>
  </tr>
 </tbody>
</table>

<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
<p>{{Compat("api.Element.animate")}}</p>

<h2 id="Смотрите_также">Смотрите также</h2>

<ul>
 <li><a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a></li>
 <li>{{domxref("Element.getAnimations()")}}</li>
 <li>{{domxref("Animation")}}</li>
</ul>