path: root/files/ru/web/css/css_animations/using_css_animations/index.html

---
title: Использование CSS-анимации
slug: Web/CSS/CSS_Animations/Using_CSS_animations
tags:
  - Advanced
  - CSS
  - CSS Animations
  - Example
  - Experimental
  - Guide
translation_of: Web/CSS/CSS_Animations/Using_CSS_animations
original_slug: Web/CSS/CSS_Animations/Ispolzovanie_CSS_animatciy
---
<p>{{SeeCompatTable}}{{CSSRef}}</p>

<p><span class="seoSummary">CSS анимации позволяют анимировать переходы от одной конфигурации CSS стилей к другой.</span> CSS-анимации состоят из двух компонентов: стилевое описание анимации и набор ключевых кадров, определяющих начальное, конечное и, возможно, промежуточное состояние анимируемых стилей.</p>

<p>Есть три преимущества CSS-анимации перед традиционными способами:</p>

<ol>
 <li>Простота использования для простых анимаций; Вы можете создать анимацию, не зная JavaScript.</li>
 <li>Анимации будут хорошо работать даже при умеренных нагрузках системы. Простые анимации на JavaScript, если они плохо написаны, часто выполняются плохо. Движок может использовать frame-skipping и другие техники, чтобы сохранить производительность на таком высоком уровне .</li>
 <li>Позволяет браузеру контролировать последовательность анимации, тем самым оптимизируя производительность и эффективность браузера. Например, уменьшая частоту обновления кадров анимации в непросматриваемых в данный момент вкладках.</li>
</ol>

<h2 id="Конфигурирование_анимации">Конфигурирование анимации</h2>

<p>Чтобы создать CSS-анимацию Вы должны добавить в стиль элемента, который хотите анимировать, свойство {{ cssxref("animation") }} или его подсвойства. Это позволит Вам настроить ускорение и продолжительность анимации, а также другие детали того, как анимация должна протекать. Это не поможет Вам настроить внешний вид анимации, который настраивается с помощью {{ cssxref("@keyframes") }}, рассматриваемой далее в {{ anch("Определение последовательности анимации с помощью ключевых кадров") }}.</p>

<p>Свойство {{ cssxref("animation") }} имеет следующие подсвойства:</p>

<dl>
 <dt>{{ cssxref("animation-name") }}</dt>
 <dd>Определяет имя {{ cssxref("@keyframes") }}, настраивающего кадры анимации.</dd>
 <dt>{{ cssxref("animation-duration") }}</dt>
 <dd>Определяет время, в течение которого должен пройти один цикл анимации.</dd>
 <dt>{{ cssxref("animation-timing-function") }}</dt>
 <dd>Настраивает ускорение анимации.</dd>
 <dt>{{ cssxref("animation-delay") }}</dt>
 <dd><span id="result_box" lang="ru"><span class="hps">Настраивает</span> <span class="hps">задержку</span> <span class="hps">между временем загрузки элемента и временем начала анимации</span></span>.</dd>
 <dt>{{ cssxref("animation-iteration-count") }}</dt>
 <dd>Определяет количество повторений анимации; Вы можете использовать значение <code>infinite</code> для бесконечного повторения анимации.</dd>
 <dt>{{ cssxref("animation-direction") }}</dt>
 <dd>Даёт возможность при каждом повторе анимации идти по альтернативному пути, либо сбросить все значения и повторить анимацию.</dd>
 <dt>{{ cssxref("animation-fill-mode") }}</dt>
 <dd>Настраивает значения, используемые анимацией, до и после исполнения.</dd>
 <dt>{{ cssxref("animation-play-state") }}</dt>
 <dd>Позволяет приостановить и возобновить анимацию.</dd>
</dl>

<h2 id="Определение_последовательности_анимации_с_помощью_ключевых_кадров">Определение последовательности анимации с помощью ключевых кадров</h2>

<p><span id="result_box" lang="ru"><span class="hps">После того, как</span> <span class="hps">вы настроили</span> <span class="hps">временные свойства (продолжительность, ускорение)</span> <span class="hps">анимации</span><span>, вы</span> <span class="hps">должны определить</span> <span class="hps">внешний вид</span> <span class="hps">анимации</span></span>. Это делается с помощью двух и более ключевых кадров после {{ cssxref("@keyframes") }}. Каждый кадр описывает, как должен выглядеть анимированный элемент в текущий момент.</p>

<p>В то время, как временные характеристики (продолжительность анимации) указываются в стилях для анимируемого элемента, ключевые кадры используют {{ cssxref("percentage") }}, чтобы определить стадию протекания анимации. 0% означает начало анимации, а 100% её конец. Так как эти значения очень важны, то для них придумали специальные слова: <code>from</code> и <code>to</code>.</p>

<p>Вы также можете добавить ключевые кадры, характеризующие промежуточное состояние анимации.</p>

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

<div class="note"><strong>Внимание:</strong> Примеры ниже не используют префиксов для CSS стилей . Webkit-браузеры и старые версии других браузеров нуждаются в указании префиксов в CSS стилях. Примеры, на которые Вы можете кликнуть в своём браузере, также содержат префиксы -webkit-.</div>

<h3 id="Скольжение_текста">Скольжение текста</h3>

<p>Этот простой пример анимирует скольжение текста в элементе {{ HTMLElement("p") }} от правого края окна браузера.</p>

<p>Обратите внимание на то, что анимация может сделать страницу шире, чем окно браузера. Этого можно избежать, поместив элемент, который будет анимироваться, в контейнер и установив ему свойство {{cssxref("overflow")}}<code>: hidden</code>.</p>

<pre class="brush: css">p {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}
</pre>

<p>В стиле для элемента {{ HTMLElement("p") }} с помощью свойства {{ cssxref("animation-duration") }} указано, что исполнение анимации от начала до конца должно занять 3 с , и что имя для  {{ cssxref("@keyframes") }}, описывающей саму анимацию, определено как "slidein".</p>

<p>В элемент {{ HTMLElement("p") }} можно добавлять и другие пользовательские стили, чтобы как-то украсить его, однако здесь мы хотели продемонстрировать только эффект анимации.</p>

<p>Ключевые кадры определяются с помощью правила {{ cssxref("@keyframes") }}. В данном случае мы имеем только два ключевых кадра. Первый при 0% анимации (<code>from</code>). Здесь мы придаём элементу левый отступ в 100% и ширину в 300% (в три раза больше ширины родительского элемента). Это становится причиной того, что при первом кадре анимации заголовок {{ HTMLElement("p") }} находится за пределами правого края окна браузера .</p>

<p>Второй ключевой кадр (to) определяет конец анимации, т.е (100%). Левый отступ устанавливается равным 0, а ширина 100%. Все выглядит так, будто заголовок {{ HTMLElement("p") }} приплывает к левому краю окна браузера.</p>

<pre class="brush: html">&lt;p&gt;The Caterpillar and Alice looked at each other for some time in silence:
at last the Caterpillar took the hookah out of its mouth, and addressed
her in a languid, sleepy voice.&lt;/p&gt;
</pre>

<p>(Обновите страницу, чтобы увидеть анимацию, или щёлкните по кнопке CodePen, чтобы воспроизвести её в окне CodePen)</p>

<p>{{EmbedLiveSample("Скольжение_текста","100%","250")}}</p>

<h3 id="Добавление_других_ключевых_кадров">Добавление других ключевых кадров</h3>

<p>Давайте добавим другие ключевые кадры в предыдущий пример. Скажем, мы хотим чтобы размер шрифта заголовка временно увеличивался по мере продвижения влево, а потом возвращался к первоначальному значению . Это легко реализовать с помощью следующего ключевого кадра:</p>

<pre class="brush: css">75% {
  font-size: 300%;
  margin-left: 25%;
  width: 150%;
}
</pre>

<pre class="brush: css">p {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }

  75% {
    font-size: 300%;
    margin-left: 25%;
    width: 150%;
  }
}
</pre>

<pre class="brush: html">&lt;p&gt;The Caterpillar and Alice looked at each other for some time in silence:
at last the Caterpillar took the hookah out of its mouth, and addressed
her in a languid, sleepy voice.&lt;/p&gt;
</pre>

<p>Это говорит браузеру о том, что при 75% выполнения анимации, шрифт должен быть 300%, а ширина 150%.</p>

<p>(Обновите страницу, чтобы увидеть анимацию, или щёлкните по кнопке CodePen, чтобы воспроизвести её в окне CodePen)</p>

<p>{{ EmbedLiveSample('Добавление_других_ключевых_кадров', '100%', '250', '', 'Web/CSS/CSS_Animations/Ispolzovanie_CSS_animatciy') }}</p>

<h3 id="Настройка_повторения">Настройка повторения</h3>

<p>Чтобы настроить повторение, нужно добавить свойство {{ cssxref("animation-iteration-count") }} и задать ему значение, равное нужному количеству повторений анимаций . В данном случае давайте установим значение <code>infinite</code> для бесконечного повторения:</p>

<pre class="brush: css">p {
  animation-duration: 3s;
  animation-name: slidein;
  animation-iteration-count: infinite;
}
</pre>

<pre class="brush: css">@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}
</pre>

<pre class="brush: html">&lt;p&gt;The Caterpillar and Alice looked at each other for some time in silence:
at last the Caterpillar took the hookah out of its mouth, and addressed
her in a languid, sleepy voice.&lt;/p&gt;
</pre>

<p>{{EmbedLiveSample("Настройка_повторения","100%","250")}}</p>

<h3 id="Движение_текста_вправо_и_влево">Движение текста вправо и влево</h3>

<p>Итак, мы настроили повторение, но получили нечто странное: текст при каждом повторении снова "запрыгивает" за край окна браузера. То, чего мы хотим, так это чтобы текст двигался влево и вправо. Этого легко достичь с помощью установки свойству {{ cssxref("animation-direction") }} значения <code>alternate</code>:</p>

<pre class="brush: css">p {
  animation-duration: 3s;
  animation-name: slidein;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
</pre>

<pre class="brush: css">@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}
</pre>

<pre class="brush: html">&lt;p&gt;The Caterpillar and Alice looked at each other for some time in silence:
at last the Caterpillar took the hookah out of its mouth, and addressed
her in a languid, sleepy voice.&lt;/p&gt;
</pre>

<p>{{ EmbedLiveSample('Движение_текста_вправо_и_влево', '100%', '250', '', 'Web/CSS/CSS_Animations/Ispolzovanie_CSS_animatciy') }}</p>

<h3 id="Использование_шорткодов">Использование шорткодов</h3>

<p>Шорткод {{cssxref("animation")}} полезен для экономии места в коде. Например, правило, которое мы используем в этой статье:</p>

<pre><code>p {
  animation-duration: 3s;
  animation-name: slidein;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}</code></pre>

<p>можно заменить на:</p>

<pre><code>p {
  animation: 3s infinite alternate slidein;
}</code></pre>

<div class="blockIndicator note">
<p><strong>Внимание</strong>: подробнее об этом на странице раздела {{cssxref("animation")}} </p>
</div>

<h3 id="Установка_нескольких_значений_свойствам_анимации">Установка нескольких значений свойствам анимации  </h3>

<p>CSS свойство анимации может иметь несколько значений, разделённых запятыми. Это используется, чтобы указать несколько значений анимации в одном правиле и установить разную продолжительность, число повторений и т.д., для различных анимаций. Рассмотрим несколько примеров, чтобы увидеть разницу.</p>

<p>В первом примере у свойства имени анимации установлены три значения, у свойств продолжительности и количества повторений  — по одному. В этом случае у всех трёх анимаций одинаковая продолжительность и число повторений:</p>

<pre><code>animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 3s;
animation-iteration-count: 1;</code></pre>

<p>Во втором примере установлены три значения для каждого из свойств. В этом случае каждая анимация выполняется с соответствующими по порядку значениями в каждом свойстве, так, например, <code>fadeInOut</code> имеет продолжительность 2.5 с и количество повторений 2, и т.д.</p>

<pre><code>animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;</code></pre>

<p>В третьем примере определены три значения имени анимации, но два значения продолжительности и количества повторений. В случае, когда количества значений недостаточно для каждой анимации, значения берутся циклически от начала до конца. Например, у <code>fadeInOut</code> длительность будет 2.5s,  а <code>moveLeft300px</code> — 5s. Значения продолжительности закончились, теперь они берутся сначала — <code>bounce</code> получит продолжительность 2.5s. Значение количества повторений (а также другие указанные свойства) будет определено таким же образом.</p>

<pre><code>animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s;
animation-iteration-count: 2, 1;</code></pre>

<h3 id="Использование_событий_анимации">Использование событий анимации</h3>

<p>Вы можете получить дополнительный контроль над анимацией, а также полезную информацию о ней, с помощью <em>событий анимации</em>. Эти события, представленные объектом {{ domxref("event/AnimationEvent", "AnimationEvent") }}, можно использовать, чтобы определить, когда начинается и заканчивается анимация или начинается новая итерация. Каждое событие содержит момент времени, когда оно произошло, а также имя анимации, которая вызвала событие.</p>

<p>Мы будем модифицировать текст, чтобы выводить некоторую информацию  о каждом событии анимации. Так мы сможем увидеть, как она работает.</p>

<h4 id="Добавление_CSS">Добавление CSS</h4>

<p>Начнём с добавления CSS. Анимация будет длиться 3 секунды, будет называться "slidein", будет повторяться 3 раза, а также значение <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">animation-direction</span></font> установлено <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">alternate</span></font>. В ключевых кадрах {{ cssxref("@keyframes") }} установлены такие значения ширины и левого отступа, что элемент будет скользить по экрану.</p>

<pre class="brush: css">.slidein {
  -moz-animation-duration: 3s;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -moz-animation-name: slidein;
  -webkit-animation-name: slidein;
  animation-name: slidein;
  -moz-animation-iteration-count: 3;
  -webkit-animation-iteration-count: 3;
  animation-iteration-count: 3;
  -moz-animation-direction: alternate;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}

@-moz-keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

@-webkit-keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%
  }

  to {
   margin-left: 0%;
   width: 100%;
 }
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%
  }

  to {
   margin-left: 0%;
   width: 100%;
 }
}</pre>

<h4 id="Добавление_обработчика_события_анимации">Добавление обработчика события анимации</h4>

<p>Будем использовать JavaScript для отслеживания всех трёх возможных событий анимации. Следующий код конфигурирует обработчик; мы вызываем его при первой загрузке документа.</p>

<pre class="brush: js">var e = document.getElementById("watchme");
e.addEventListener("animationstart", listener, false);
e.addEventListener("animationend", listener, false);
e.addEventListener("animationiteration", listener, false);

e.className = "slidein";
</pre>

<p>Это довольно стандартный код; Вы можете получить дополнительную информацию в документации {{ domxref("element.addEventListener()") }}. Последнее, что делает этот код - это установка класса "slidein" для анимируемого элемента; мы делаем это, чтобы запустить анимацию.</p>

<p>Почему? Потому что в нашем случае событие <code>animationstart</code> происходит как только анимация стартует, и это происходит раньше, чем исполняется наш сценарий. Так мы сможем контролировать начало анимации самостоятельно посредством вставки класса "slidein" для анимируемого элемента.</p>

<h4 id="Регистрация_событий">Регистрация событий</h4>

<p>События будут передаваться функции <code>listener()</code>, показанной ниже.</p>

<pre class="brush: js">function listener(e) {
  var l = document.createElement("li");
  switch(e.type) {
    case "animationstart":
      l.innerHTML = "Started: elapsed time is " + e.elapsedTime;
      break;
    case "animationend":
      l.innerHTML = "Ended: elapsed time is " + e.elapsedTime;
      break;
    case "animationiteration":
      l.innerHTML = "New loop started at time " + e.elapsedTime;
      break;
  }
  document.getElementById("output").appendChild(l);
}
</pre>

<p>Этот код также очень прост. Этот код следит за {{ domxref("event.type") }}, чтобы определить тип события, и добавляет элемент {{ HTMLElement("ul") }}, чтобы залогировать произошедшее событие.</p>

<p>Вывод, когда анимация закончится, будет выглядеть примерно следующим образом:</p>

<ul>
 <li>Started: elapsed time is 0</li>
 <li>New loop started at time 3.01200008392334</li>
 <li>New loop started at time 6.00600004196167</li>
 <li>Ended: elapsed time is 9.234000205993652</li>
</ul>

<p>Обратите внимание, что время, указанное в выводе, и время, которое мы указали в стилях, не совпадают. Также обратите внимание, что после окончания итерации не посылается событие <code>animationiteration</code> ; вместо него посылается событие <code>animationend</code>.</p>

<h4 id="HTML">HTML</h4>

<p>Ради полноты картины приведём код разметки HTML. В разметке имеется тег <em>ul,</em> в который и выводится вся информация:</p>

<pre class="brush: html">&lt;body&gt;
  &lt;h1 id="watchme"&gt;Watch me move&lt;/h1&gt;
  &lt;p&gt;This example shows how to use CSS animations to make &lt;code&gt;p&lt;/code&gt; elements
  move across the page.&lt;/p&gt;
  &lt;p&gt;In addition, we output some text each time an animation event fires, so you can see them in action.&lt;/p&gt;
  &lt;ul id="output"&gt;
  &lt;/ul&gt;
&lt;/body&gt;
</pre>

<p>{{ EmbedLiveSample('Использование_событий_анимации', '600', '300')}}</p>

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

<ul>
 <li>{{ domxref("AnimationEvent", "AnimationEvent") }}</li>
 <li><a href="/en-US/docs/CSS/CSS_animations/Detecting_CSS_animation_support" title="en/CSS/CSS animations/Detecting CSS animation support">Определение поддержки CSS анимации</a></li>
 <li><a href="/en-US/docs/Web/Guide/CSS/Using_CSS_transitions">Использование CSS-переходов</a></li>
</ul>