initial commit

4 files changed, 765 insertions, 0 deletions

diff --git a/files/ru/web/css/css_animations/detecting_css_animation_support/index.html b/files/ru/web/css/css_animations/detecting_css_animation_support/index.html
new file mode 100644
index 0000000000..785f85c87c
--- /dev/null
+++ b/files/ru/web/css/css_animations/detecting_css_animation_support/index.html
@@ -0,0 +1,91 @@
+---
+title: Detecting CSS animation support
+slug: Web/CSS/CSS_Animations/Detecting_CSS_animation_support
+translation_of: Web/CSS/CSS_Animations/Detecting_CSS_animation_support
+---
+<div>{{CSSRef}}</div>
+
+<p>CSS-анимации позволяют создавать креативные анимации контента, используя только CSS. Однако, скорее всего, будут случаи, когда эта функция недоступна, и вам придется решать эти задачи с помощью кода JavaScript, чтобы получить аналогичный эффект. Эта статья, основанная на посте в блоге Криса Хайльмана, демонстрирует такую технику.</p>
+
+<h2 id="Тестирование_поддержки_анимации_CSS">Тестирование поддержки анимации CSS</h2>
+
+<p>Этот код проверит, доступна ли поддержка анимации CSS:</p>
+
+<pre class="brush: js">var animation = false,
+    animationstring = 'animation',
+    keyframeprefix = '',
+    domPrefixes = 'Webkit Moz O ms Khtml'.split(' '),
+    pfx  = '',
+    elem = document.createElement('div');
+
+if( elem.style.animationName !== undefined ) { animation = true; }
+
+if( animation === false ) {
+  for( var i = 0; i &lt; domPrefixes.length; i++ ) {
+    if( elem.style[ domPrefixes[i] + 'AnimationName' ] !== undefined ) {
+      pfx = domPrefixes[ i ];
+      animationstring = pfx + 'Animation';
+      keyframeprefix = '-' + pfx.toLowerCase() + '-';
+      animation = true;
+      break;
+    }
+  }
+}
+</pre>
+
+<p>Для начала мы определим несколько переменных. Мы предполагаем, что анимация не поддерживается установкой значения animation в false. Мы устанавливаем строке для <code>animationstring</code> - <code>animation</code> , которая является свойством, которое мы хотим установить позже. Мы создаем массив префиксов браузера для циклического перебора и устанавливаем pfx в пустую строку.</p>
+
+<p>Затем мы проверяем, установлено ли свойство CSS {{cssxref("animation-name")}} в коллекции стилей для элемента, заданного переменной elem. Это означает, что браузер поддерживает CSS-анимацию без какого-либо префикса, чего на сегодняшний день никто из них не делает..</p>
+
+<p>Если браузер не поддерживает анимацию без префиксов и анимация по-прежнему ложна, мы перебираем все возможные префиксы, так как все основные браузеры в настоящее время префиксируют это свойство и меняют его имя на <code>AnimationName</code> .</p>
+
+<p>После завершения выполнения этого кода значение анимации будет равно false, если поддержка CSS-анимации недоступна, или true. Если это верно, то и имя свойства анимации, и keyframe prefix будут правильными. Таким образом, если вы используете новый Firefox, свойство будет <code>MozAnimation</code> и префикс ключевого кадра <code>-moz-</code> и с Chrome будет <code>WebkitAnimation</code> и <code>-webkit-</code>. Обратите внимание, что браузеры не делают это легко с переключением между camelCase и переносом.</p>
+
+<h2 id="Анимация_с_использованием_правильного_синтаксиса_для_разных_браузеров">Анимация с использованием правильного синтаксиса для разных браузеров</h2>
+
+<p>Теперь, когда вы знаете, поддерживается CSS-анимация или нет, мы можем анимировать.</p>
+
+<pre class="brush: js">if( animation === false ) {
+
+  // animate in JavaScript fallback
+
+} else {
+  elem.style[ animationstring ] = 'rotate 1s linear infinite';
+
+  var keyframes = '@' + keyframeprefix + 'keyframes rotate { '+
+                    'from {' + keyframeprefix + 'transform:rotate( 0deg ) }'+
+                    'to {' + keyframeprefix + 'transform:rotate( 360deg ) }'+
+                  '}';
+
+  if( document.styleSheets &amp;&amp; document.styleSheets.length ) {
+
+      document.styleSheets[0].insertRule( keyframes, 0 );
+
+  } else {
+
+    var s = document.createElement( 'style' );
+    s.innerHTML = keyframes;
+    document.getElementsByTagName( 'head' )[ 0 ].appendChild( s );
+
+  }
+
+}
+</pre>
+
+<p>Этот код определяет значение анимации; если оно ложно, мы знаем, что нам нужно использовать альтернативный код JavaScript для выполнения нашей анимации. В противном случае мы можем использовать JavaScript для создания желаемых анимационных эффектов CSS.</p>
+
+<p>Установка свойства анимации очень проста; просто обновите его значение в коллекции стилей. Однако добавление ключевых кадров сложнее, так как они не определяются с помощью традиционного синтаксиса CSS (что делает их более гибкими, но труднее определить из скрипта).</p>
+
+<p>Чтобы определить наши ключевые кадры с помощью JavaScript, нам нужно записать их в виде строки CSS. Все, что мы делаем, - это устанавливаем переменную keyframes, добавляя префиксы к каждому атрибуту по мере его построения. Эта переменная, будучи однажды сконструированной, содержит полное описание всех ключевых кадров, необходимых для нашей последовательности анимации.</p>
+
+<p>Следующая задача-фактически добавить ключевые кадры в CSS страницы. Первое, что нужно сделать, это посмотреть, есть ли уже таблица стилей в документе; если да, то мы просто вставляем описание ключевого кадра в эту таблицу стилей; это делается в строках 13-15.</p>
+
+<p>Если таблицы стилей еще нет, то создается новый элемент {{HTMLElement("style")}}, а его содержимое устанавливается в значение keyframes. Затем новый элемент {{HTMLElement("style")}} вставляется в документ {{HTMLElement("head")}}, тем самым добавляя новую таблицу стилей в документ.</p>
+
+<p><a href="https://jsfiddle.net/codepo8/ATS2S/8/embedded/result">View on JSFiddle</a></p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations">CSS animations</a></li>
+</ul>
diff --git a/files/ru/web/css/css_animations/index.html b/files/ru/web/css/css_animations/index.html
new file mode 100644
index 0000000000..da1fc8dd8e
--- /dev/null
+++ b/files/ru/web/css/css_animations/index.html
@@ -0,0 +1,136 @@
+---
+title: CSS Animations
+slug: Web/CSS/CSS_Animations
+tags:
+  - CSS
+  - CSS Animations
+  - Experimental
+  - Overview
+  - Reference
+translation_of: Web/CSS/CSS_Animations
+---
+<p>{{CSSRef}}{{SeeCompatTable}}</p>
+
+<p><strong>CSS Анимации</strong> - это модуль CSS, который позволяет анимировать изменение значений CSS-свойств, используя опорные кадры (<em>keyframes</em>). Для управления поведением таких анимаций можно задать хронометражную функцию, длительность, количество повторов и другие аттрибуты.</p>
+
+<h2 id="Reference">Reference</h2>
+
+<h3 id="CSS_Properties">CSS Properties</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("animation")}}</li>
+ <li>{{cssxref("animation")}}</li>
+ <li>{{cssxref("animation-delay")}}</li>
+ <li>{{cssxref("animation-direction")}}</li>
+ <li>{{cssxref("animation-duration")}}</li>
+ <li>{{cssxref("animation-fill-mode")}}</li>
+ <li>{{cssxref("animation-iteration-count")}}</li>
+ <li>{{cssxref("animation-name")}}</li>
+ <li>{{cssxref("animation-play-state")}}</li>
+ <li>{{cssxref("animation-timing-function")}}</li>
+</ul>
+</div>
+
+<h3 id="CSS_At-rules">CSS At-rules</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("@keyframes")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Animations/Detecting_CSS_animation_support">Как определить, поддерживаются ли CSS-анимации</a></dt>
+ <dd>Описаны техники определения того, поддерживает ли браузер CSS-анимации.</dd>
+ <dt><a href="/ru/docs/Web/CSS/CSS_Animations/Ispolzovanie_CSS_animatciy">Использование CSS-анимаций</a></dt>
+ <dd>Пошаговое руководство по созданию анимаций с помощью CSS. Статья описывает все касающиеся анимации CSS-свойства и @-правила и объясняет, как они взаимодействуют друг с другом.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Animations') }}</td>
+   <td>{{ Spec2('CSS3 Animations') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br>
+    43.0</td>
+   <td>{{CompatGeckoDesktop("5.0")}}{{property_prefix("-moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10</td>
+   <td>12{{property_prefix("-o")}}<br>
+    12.10<sup>[2]</sup></td>
+   <td>4.0{{property_prefix("-webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2.1 {{property_prefix("-webkit")}} [1]<br>
+    4.0 {{property_prefix("-webkit")}}</td>
+   <td>{{CompatGeckoMobile("5.0")}}{{property_prefix("-moz")}}<br>
+    {{CompatGeckoMobile("16.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Partial support: {{cssxref("animation-fill-mode")}} property is not supported in Android browser below 2.3.</p>
+
+<p>[2] See the <a href="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot">release notes to Opera 12.50</a>.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Related to CSS Animations, <a href="/en-US/docs/Web/CSS/CSS_Transitions">CSS Transitions</a> can trigger animations on user actions.</li>
+</ul>
+
+<p> </p>
diff --git a/files/ru/web/css/css_animations/ispolzovanie_css_animatciy/index.html b/files/ru/web/css/css_animations/ispolzovanie_css_animatciy/index.html
new file mode 100644
index 0000000000..05f6cb5cec
--- /dev/null
+++ b/files/ru/web/css/css_animations/ispolzovanie_css_animatciy/index.html
@@ -0,0 +1,388 @@
+---
+title: Использование CSS-анимации
+slug: Web/CSS/CSS_Animations/Ispolzovanie_CSS_animatciy
+tags:
+  - Advanced
+  - CSS
+  - CSS Animations
+  - Example
+  - Experimental
+  - Guide
+translation_of: Web/CSS/CSS_Animations/Using_CSS_animations
+---
+<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>Kлючевые кадры определяются с помощью правила {{ 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 cвойство анимации может иметь несколько значений, разделенных запятыми. Это используется, чтобы указать несколько значений анимации в одном правиле и установить разную продолжительность, число повторений и т.д., для различных анимаций. Рассмотрим несколько примеров, чтобы увидеть разницу.</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>
diff --git a/files/ru/web/css/css_animations/tips/index.html b/files/ru/web/css/css_animations/tips/index.html
new file mode 100644
index 0000000000..8b4468729d
--- /dev/null
+++ b/files/ru/web/css/css_animations/tips/index.html
@@ -0,0 +1,150 @@
+---
+title: CSS Animations tips and tricks
+slug: Web/CSS/CSS_Animations/Tips
+translation_of: Web/CSS/CSS_Animations/Tips
+---
+<div>{{cssref}}</div>
+
+<p>CSS-анимация позволяет делать невероятные вещи с элементами, из которых состоят ваши документы и приложения. Однако есть вещи, которые не являются очевидными и, о способах реализации которых, вы не знаете, но вы бы хотели их реализовать. Эта статья представляет собой набор советов и трюков, которые мы нашли, чтобы облегчить вашу работу. В том числе, как снова запустить остановленную анимацию.</p>
+
+<h2 id="Run_an_animation_again" name="Run_an_animation_again">Запустить анимацию снова</h2>
+
+<p>Спецификация <a href="/en-US/docs/Web/CSS/CSS_Animations">CSS Animations</a> не предлагает способа запустить анимацию снова. Нет никакого волшебного метода resetAnimation () для элементов, и вы даже не можете просто установить элемент {{cssxref ("animation-play-state")}} в" running " снова. Вместо этого вы должны использовать хитрые трюки, чтобы запустить остановленную анимацию для воспроизведения.</p>
+
+<p>Предлагаем вам один из способов, который мы считаем достаточно надежным и стабильным.</p>
+
+<h3 id="HTML_содержимое">HTML содержимое</h3>
+
+<p>Во-первых, давайте определим HTML для {{HTMLElement("div")}} который мы хотим анимировать, и кнопку, которая будет запускать (или воспроизводить) анимацию.</p>
+
+<pre class="brush: html">&lt;div class="box"&gt;
+&lt;/div&gt;
+
+&lt;div class="runButton"&gt;Click me to run the animation&lt;/div&gt;</pre>
+
+<h3 id="CSS_содержимое">CSS содержимое</h3>
+
+<p>Теперь мы определим саму анимацию с помощью CSS. Некоторые стили CSS, которые не важны (стиль самой кнопки "выполнить"), здесь не показаны, для краткости.</p>
+
+<div class="hidden">
+<pre class="brush: css">.runButton {
+  cursor: pointer;
+  width: 300px;
+  border: 1px solid black;
+  font-size: 16px;
+  text-align: center;
+  margin-top: 12px;
+  padding-top: 2px;
+  padding-bottom: 4px;
+  color: white;
+  background-color: darkgreen;
+  font: 14px "Open Sans", "Arial", sans-serif;
+}</pre>
+</div>
+
+<pre class="brush: css">@keyframes colorchange {
+  0% { background: yellow }
+  100% { background: blue }
+}
+
+.box {
+  width: 100px;
+  height: 100px;
+  border: 1px solid black;
+}
+
+.changing {
+  animation: colorchange 2s;
+}</pre>
+
+<p>Здесь есть два класса. В классе <code>"box"</code> прописано основное описание внешнего вида элемента, без какой-либо анимационной информации. Детали анимации включены в класс <code>"changing"</code> , который сообщает, что {{cssxref("@keyframes")}} с именем <code>"colorchange"</code> должен использоваться в течение 2 секунд.</p>
+
+<p>Обратите внимание, что каких-либо анимационных эффектов у элемента не наблюдается, т.е. анимации нет.</p>
+
+<h3 id="JavaScript_содержимое">JavaScript содержимое</h3>
+
+<p>Далее мы рассмотрим JavaScript, который дополняет эту работу. Основа этой техники находится в функции play (), которая вызывается, когда пользователь нажимает на кнопку "Выполнить".</p>
+
+<pre class="brush: js">function play() {
+  document.querySelector(".box").className = "box";
+  window.requestAnimationFrame(function(time) {
+    window.requestAnimationFrame(function(time) {
+      document.querySelector(".box").className = "box changing";
+    });
+  });
+}</pre>
+
+<p>Это выглядит странно, не так ли? Это потому, что единственный способ воспроизвести анимацию снова-удалить анимационный эффект, позволить документу пересчитать стили так, чтобы он знал, что вы это сделали, а затем добавить анимационный эффект обратно в элемент. Чтобы это произошло, мы должны быть креативными.</p>
+
+<p>Вот что происходит, когда вызывается функция <code>play()</code> :</p>
+
+<ol>
+ <li>Список классов CSS в элементе сбрасывается до простого "box". Это приводит к удалению всех других классов, которые в настоящее время применяются к элементу, включая класс <code>"changing"</code> , который обрабатывает анимацию. Другими словами, мы удаляем анимационный эффект из элемента. Однако изменения в списке классов не вступают в силу до тех пор, пока не будет завершен перерасчет стиля и не произойдет обновление, отражающее это изменение.</li>
+ <li>Чтобы убедиться, что стили пересчитаны, мы используем  {{domxref("window.requestAnimationFrame()")}}, указывающую обратный вызов. Наш обратный вызов выполняется непосредственно перед следующей перерисовкой документа. Проблема заключается в том,что, поскольку это происходит до перерисовки, перерасчет стиля еще не произошел! </li>
+ <li>Наш обратный вызов ловко вызывает <code>requestAnimationFrame()</code> второй раз! На этот раз обратный вызов выполняется до следующей перерисовки, то есть после того, как произошла перерасчет стиля. Этот обратный вызов добавляет класс <code>"changing"</code> обратно в элемент, так что перерисовка снова запустит анимацию.</li>
+</ol>
+
+<p>Конечно, нам также нужно добавить обработчик событий к нашей кнопке "выполнить", чтобы она действительно что-то делала:</p>
+
+<pre class="brush: js">document.querySelector(".runButton").addEventListener("click", play, false);</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{ EmbedLiveSample('Run_an_animation_again', 320, 160) }}</p>
+
+<h2 id="Остановка_анимации">Остановка анимации</h2>
+
+<p>Простое удаление {{cssxref("animation-name")}} примененного к элементу, заставит его исчезнуть или перейти в следующее состояние. Если вместо этого вы хотите, чтобы анимация закончилась, а затем остановилась, вам нужно попробовать другой подход. Главные хитрости заключаются в следующем:</p>
+
+<ol>
+ <li>Сделайте свою анимацию настолько самодостаточной, насколько это возможно. Это означает, что вы не должны полагаться на <code>animation-direction: alternate</code>. Вместо этого вы должны явно написать анимацию ключевого кадра, которая проходит через полную анимацию в одном прямом повторении.</li>
+ <li>Используйте JavaScript и очистите анимацию, используемую при запуске события<code>animationiteration</code> .</li>
+</ol>
+
+<p>Следующая демонстрация показывает, как вы могли бы достичь вышеупомянутой техники JavaScript:</p>
+
+<pre class="brush: css">.slidein {
+  animation-duration: 5s;
+  animation-name: slidein;
+  animation-iteration-count: infinite;
+}
+
+.stopped {
+  animation-name: none;
+}
+
+@keyframes slidein {
+  0% {
+    margin-left: 0%;
+  }
+  50% {
+    margin-left: 50%;
+  }
+  100% {
+    margin-left: 0%;
+  }
+}
+</pre>
+
+<pre class="brush: html">&lt;h1 id="watchme"&gt;Click me to stop&lt;/h1&gt;
+</pre>
+
+<pre class="brush: js">let watchme = document.getElementById('watchme')
+
+watchme.className = 'slidein'
+const listener = (e) =&gt; {
+  watchme.className = 'slidein stopped'
+}
+watchme.addEventListener('click', () =&gt;
+  watchme.addEventListener('animationiteration', listener, false)
+)
+</pre>
+
+<p>Demo <a href="https://jsfiddle.net/morenoh149/5ty5a4oy/">https://jsfiddle.net/morenoh149/5ty5a4oy/</a></p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/CSS/Using_CSS_transitions">Using CSS transitions</a></li>
+ <li>{{domxref("Window.requestAnimationFrame()")}}</li>
+</ul>