--- 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> {{Specifications}} <h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> <p>{{Compat}}</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>