aboutsummaryrefslogtreecommitdiff
path: root/files/ru/web/css/css_animations/using_css_animations/index.html
diff options
context:
space:
mode:
authorAlexey Istomin <webistomin@gmail.com>2021-03-20 18:37:44 +0300
committerGitHub <noreply@github.com>2021-03-20 18:37:44 +0300
commit841aae260382e2bf5ebb44d765d8c7301d27caab (patch)
tree81a92c25f6dc02e5f119131785d721db79fc3455 /files/ru/web/css/css_animations/using_css_animations/index.html
parent730fea852ff827ca034fe17c84288c95d270ec92 (diff)
downloadtranslated-content-841aae260382e2bf5ebb44d765d8c7301d27caab.tar.gz
translated-content-841aae260382e2bf5ebb44d765d8c7301d27caab.tar.bz2
translated-content-841aae260382e2bf5ebb44d765d8c7301d27caab.zip
Restore "ё" letter in Russian translation (#239)
* docs(ru): restore ё letter * docs(ru): resolve conflicts * refactor(idea): remove ide folder
Diffstat (limited to 'files/ru/web/css/css_animations/using_css_animations/index.html')
-rw-r--r--files/ru/web/css/css_animations/using_css_animations/index.html22
1 files changed, 11 insertions, 11 deletions
diff --git a/files/ru/web/css/css_animations/using_css_animations/index.html b/files/ru/web/css/css_animations/using_css_animations/index.html
index 2f25d7922e..14ccbe0a77 100644
--- a/files/ru/web/css/css_animations/using_css_animations/index.html
+++ b/files/ru/web/css/css_animations/using_css_animations/index.html
@@ -41,7 +41,7 @@ original_slug: Web/CSS/CSS_Animations/Ispolzovanie_CSS_animatciy
<dt>{{ cssxref("animation-iteration-count") }}</dt>
<dd>Определяет количество повторений анимации; Вы можете использовать значение <code>infinite</code> для бесконечного повторения анимации.</dd>
<dt>{{ cssxref("animation-direction") }}</dt>
- <dd>Дает возможность при каждом повторе анимации идти по альтернативному пути, либо сбросить все значения и повторить анимацию.</dd>
+ <dd>Даёт возможность при каждом повторе анимации идти по альтернативному пути, либо сбросить все значения и повторить анимацию.</dd>
<dt>{{ cssxref("animation-fill-mode") }}</dt>
<dd>Настраивает значения, используемые анимацией, до и после исполнения.</dd>
<dt>{{ cssxref("animation-play-state") }}</dt>
@@ -52,13 +52,13 @@ original_slug: Web/CSS/CSS_Animations/Ispolzovanie_CSS_animatciy
<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>В то время, как временные характеристики (продолжительность анимации) указываются в стилях для анимируемого элемента, ключевые кадры используют {{ 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>
+<div class="note"><strong>Внимание:</strong> Примеры ниже не используют префиксов для CSS стилей . Webkit-браузеры и старые версии других браузеров нуждаются в указании префиксов в CSS стилях. Примеры, на которые Вы можете кликнуть в своём браузере, также содержат префиксы -webkit-.</div>
<h3 id="Скольжение_текста">Скольжение текста</h3>
@@ -88,7 +88,7 @@ original_slug: Web/CSS/CSS_Animations/Ispolzovanie_CSS_animatciy
<p>В элемент {{ HTMLElement("p") }} можно добавлять и другие пользовательские стили, чтобы как-то украсить его, однако здесь мы хотели продемонстрировать только эффект анимации.</p>
-<p>Ключевые кадры определяются с помощью правила {{ cssxref("@keyframes") }}. В данном случае мы имеем только два ключевых кадра. Первый при 0% анимации (<code>from</code>). Здесь мы придаем элементу левый отступ в 100% и ширину в 300% (в три раза больше ширины родительского элемента). Это становится причиной того, что при первом кадре анимации заголовок {{ HTMLElement("p") }} находится за пределами правого края окна браузера .</p>
+<p>Ключевые кадры определяются с помощью правила {{ cssxref("@keyframes") }}. В данном случае мы имеем только два ключевых кадра. Первый при 0% анимации (<code>from</code>). Здесь мы придаём элементу левый отступ в 100% и ширину в 300% (в три раза больше ширины родительского элемента). Это становится причиной того, что при первом кадре анимации заголовок {{ HTMLElement("p") }} находится за пределами правого края окна браузера .</p>
<p>Второй ключевой кадр (to) определяет конец анимации, т.е (100%). Левый отступ устанавливается равным 0, а ширина 100%. Все выглядит так, будто заголовок {{ HTMLElement("p") }} приплывает к левому краю окна браузера.</p>
@@ -97,7 +97,7 @@ 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>(Обновите страницу, чтобы увидеть анимацию, или щёлкните по кнопке CodePen, чтобы воспроизвести её в окне CodePen)</p>
<p>{{EmbedLiveSample("Скольжение_текста","100%","250")}}</p>
@@ -143,7 +143,7 @@ her in a languid, sleepy voice.&lt;/p&gt;
<p>Это говорит браузеру о том, что при 75% выполнения анимации, шрифт должен быть 300%, а ширина 150%.</p>
-<p>(Обновите страницу, чтобы увидеть анимацию, или щелкните по кнопке CodePen, чтобы воспроизвести ее в окне CodePen)</p>
+<p>(Обновите страницу, чтобы увидеть анимацию, или щёлкните по кнопке CodePen, чтобы воспроизвести её в окне CodePen)</p>
<p>{{ EmbedLiveSample('Добавление_других_ключевых_кадров', '100%', '250', '', 'Web/CSS/CSS_Animations/Ispolzovanie_CSS_animatciy') }}</p>
@@ -233,9 +233,9 @@ her in a languid, sleepy voice.&lt;/p&gt;
<h3 id="Установка_нескольких_значений_свойствам_анимации">Установка нескольких значений свойствам анимации  </h3>
-<p>CSS свойство анимации может иметь несколько значений, разделенных запятыми. Это используется, чтобы указать несколько значений анимации в одном правиле и установить разную продолжительность, число повторений и т.д., для различных анимаций. Рассмотрим несколько примеров, чтобы увидеть разницу.</p>
+<p>CSS свойство анимации может иметь несколько значений, разделённых запятыми. Это используется, чтобы указать несколько значений анимации в одном правиле и установить разную продолжительность, число повторений и т.д., для различных анимаций. Рассмотрим несколько примеров, чтобы увидеть разницу.</p>
-<p>В первом примере у свойства имени анимации установлены три значения, у свойств продолжительности и количества повторений  — по одному. В этом случае у всех трех анимаций одинаковая продолжительность и число повторений:</p>
+<p>В первом примере у свойства имени анимации установлены три значения, у свойств продолжительности и количества повторений  — по одному. В этом случае у всех трёх анимаций одинаковая продолжительность и число повторений:</p>
<pre><code>animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 3s;
@@ -261,7 +261,7 @@ animation-iteration-count: 2, 1;</code></pre>
<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>
+<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;
@@ -316,7 +316,7 @@ animation-iteration-count: 2, 1;</code></pre>
<h4 id="Добавление_обработчика_события_анимации">Добавление обработчика события анимации</h4>
-<p>Будем использовать JavaScript для отслеживания всех трех возможных событий анимации. Следующий код конфигурирует обработчик; мы вызываем его при первой загрузке документа.</p>
+<p>Будем использовать JavaScript для отслеживания всех трёх возможных событий анимации. Следующий код конфигурирует обработчик; мы вызываем его при первой загрузке документа.</p>
<pre class="brush: js">var e = document.getElementById("watchme");
e.addEventListener("animationstart", listener, false);
@@ -366,7 +366,7 @@ e.className = "slidein";
<h4 id="HTML">HTML</h4>
-<p>Ради полноты картины приведем код разметки HTML. В разметке имеется тег <em>ul,</em> в который и выводится вся информация:</p>
+<p>Ради полноты картины приведём код разметки HTML. В разметке имеется тег <em>ul,</em> в который и выводится вся информация:</p>
<pre class="brush: html">&lt;body&gt;
&lt;h1 id="watchme"&gt;Watch me move&lt;/h1&gt;