From 841aae260382e2bf5ebb44d765d8c7301d27caab Mon Sep 17 00:00:00 2001 From: Alexey Istomin Date: Sat, 20 Mar 2021 18:37:44 +0300 Subject: Restore "ё" letter in Russian translation (#239) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * docs(ru): restore ё letter * docs(ru): resolve conflicts * refactor(idea): remove ide folder --- .../detecting_css_animation_support/index.html | 6 +++--- files/ru/web/css/css_animations/tips/index.html | 8 ++++---- .../css_animations/using_css_animations/index.html | 22 +++++++++++----------- 3 files changed, 18 insertions(+), 18 deletions(-) (limited to 'files/ru/web/css/css_animations') 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 index 785f85c87c..51b1c40887 100644 --- 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 @@ -5,7 +5,7 @@ translation_of: Web/CSS/CSS_Animations/Detecting_CSS_animation_support ---
{{CSSRef}}
-

CSS-анимации позволяют создавать креативные анимации контента, используя только CSS. Однако, скорее всего, будут случаи, когда эта функция недоступна, и вам придется решать эти задачи с помощью кода JavaScript, чтобы получить аналогичный эффект. Эта статья, основанная на посте в блоге Криса Хайльмана, демонстрирует такую технику.

+

CSS-анимации позволяют создавать креативные анимации контента, используя только CSS. Однако, скорее всего, будут случаи, когда эта функция недоступна, и вам придётся решать эти задачи с помощью кода JavaScript, чтобы получить аналогичный эффект. Эта статья, основанная на посте в блоге Криса Хайльмана, демонстрирует такую технику.

Тестирование поддержки анимации CSS

@@ -33,7 +33,7 @@ if( animation === false ) { } -

Для начала мы определим несколько переменных. Мы предполагаем, что анимация не поддерживается установкой значения animation в false. Мы устанавливаем строке для animationstring - animation , которая является свойством, которое мы хотим установить позже. Мы создаем массив префиксов браузера для циклического перебора и устанавливаем pfx в пустую строку.

+

Для начала мы определим несколько переменных. Мы предполагаем, что анимация не поддерживается установкой значения animation в false. Мы устанавливаем строке для animationstring - animation , которая является свойством, которое мы хотим установить позже. Мы создаём массив префиксов браузера для циклического перебора и устанавливаем pfx в пустую строку.

Затем мы проверяем, установлено ли свойство CSS {{cssxref("animation-name")}} в коллекции стилей для элемента, заданного переменной elem. Это означает, что браузер поддерживает CSS-анимацию без какого-либо префикса, чего на сегодняшний день никто из них не делает..

@@ -80,7 +80,7 @@ if( animation === false ) {

Следующая задача-фактически добавить ключевые кадры в CSS страницы. Первое, что нужно сделать, это посмотреть, есть ли уже таблица стилей в документе; если да, то мы просто вставляем описание ключевого кадра в эту таблицу стилей; это делается в строках 13-15.

-

Если таблицы стилей еще нет, то создается новый элемент {{HTMLElement("style")}}, а его содержимое устанавливается в значение keyframes. Затем новый элемент {{HTMLElement("style")}} вставляется в документ {{HTMLElement("head")}}, тем самым добавляя новую таблицу стилей в документ.

+

Если таблицы стилей ещё нет, то создаётся новый элемент {{HTMLElement("style")}}, а его содержимое устанавливается в значение keyframes. Затем новый элемент {{HTMLElement("style")}} вставляется в документ {{HTMLElement("head")}}, тем самым добавляя новую таблицу стилей в документ.

View on JSFiddle

diff --git a/files/ru/web/css/css_animations/tips/index.html b/files/ru/web/css/css_animations/tips/index.html index 495c3a3063..15929f6220 100644 --- a/files/ru/web/css/css_animations/tips/index.html +++ b/files/ru/web/css/css_animations/tips/index.html @@ -11,7 +11,7 @@ translation_of: Web/CSS/CSS_Animations/Tips

Спецификация CSS Animations не предлагает способа запустить анимацию снова. Нет никакого волшебного метода resetAnimation () для элементов, и вы даже не можете просто установить элемент {{cssxref ("animation-play-state")}} в" running " снова. Вместо этого вы должны использовать хитрые трюки, чтобы запустить остановленную анимацию для воспроизведения.

-

Предлагаем вам один из способов, который мы считаем достаточно надежным и стабильным.

+

Предлагаем вам один из способов, который мы считаем достаточно надёжным и стабильным.

HTML содержимое

@@ -80,8 +80,8 @@ translation_of: Web/CSS/CSS_Animations/Tips
  1. Список классов CSS в элементе сбрасывается до простого "box". Это приводит к удалению всех других классов, которые в настоящее время применяются к элементу, включая класс "changing" , который обрабатывает анимацию. Другими словами, мы удаляем анимационный эффект из элемента. Однако изменения в списке классов не вступают в силу до тех пор, пока не будет завершен перерасчет стиля и не произойдет обновление, отражающее это изменение.
    2. -
  2. Чтобы убедиться, что стили пересчитаны, мы используем  {{domxref("window.requestAnimationFrame()")}} с колбэком. Наш колбэк выполняется непосредственно перед следующей перерисовкой документа. Проблема заключается в том,что, поскольку это происходит до перерисовки, перерасчет стиля еще не произошел! 
    3. -
  3. Наш колбэк ловко вызывает requestAnimationFrame() второй раз! На этот раз колбэк выполняется до следующей перерисовки, то есть после того, как произошла перерасчет стиля. Этот колбэк добавляет класс "changing" обратно в элемент, так что перерисовка снова запустит анимацию.
    4. +
  4. Чтобы убедиться, что стили пересчитаны, мы используем  {{domxref("window.requestAnimationFrame()")}} с колбэком. Наш колбэк выполняется непосредственно перед следующей перерисовкой документа. Проблема заключается в том,что, поскольку это происходит до перерисовки, перерасчёт стиля ещё не произошёл! 
    5. +
  5. Наш колбэк ловко вызывает requestAnimationFrame() второй раз! На этот раз колбэк выполняется до следующей перерисовки, то есть после того, как произошла перерасчёт стиля. Этот колбэк добавляет класс "changing" обратно в элемент, так что перерисовка снова запустит анимацию.

Конечно, нам также нужно добавить обработчик событий к нашей кнопке "выполнить", чтобы она действительно что-то делала:

@@ -94,7 +94,7 @@ translation_of: Web/CSS/CSS_Animations/Tips

Остановка анимации

-

Простое удаление {{cssxref("animation-name")}} примененного к элементу, заставит его исчезнуть или перейти в следующее состояние. Если вместо этого вы хотите, чтобы анимация закончилась, а затем остановилась, вам нужно попробовать другой подход. Главные хитрости заключаются в следующем:

+

Простое удаление {{cssxref("animation-name")}} применённого к элементу, заставит его исчезнуть или перейти в следующее состояние. Если вместо этого вы хотите, чтобы анимация закончилась, а затем остановилась, вам нужно попробовать другой подход. Главные хитрости заключаются в следующем:

  1. Сделайте свою анимацию настолько самодостаточной, насколько это возможно. Это означает, что вы не должны полагаться на animation-direction: alternate. Вместо этого вы должны явно написать анимацию ключевого кадра, которая проходит через полную анимацию в одном прямом повторении.
    2. 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
    {{ cssxref("animation-iteration-count") }}
    Определяет количество повторений анимации; Вы можете использовать значение infinite для бесконечного повторения анимации.
    {{ cssxref("animation-direction") }}
    -
    Дает возможность при каждом повторе анимации идти по альтернативному пути, либо сбросить все значения и повторить анимацию.
    +
    Даёт возможность при каждом повторе анимации идти по альтернативному пути, либо сбросить все значения и повторить анимацию.
    {{ cssxref("animation-fill-mode") }}
    Настраивает значения, используемые анимацией, до и после исполнения.
    {{ cssxref("animation-play-state") }}
    @@ -52,13 +52,13 @@ original_slug: Web/CSS/CSS_Animations/Ispolzovanie_CSS_animatciy

    После того, как вы настроили временные свойства (продолжительность, ускорение) анимации, вы должны определить внешний вид анимации. Это делается с помощью двух и более ключевых кадров после {{ cssxref("@keyframes") }}. Каждый кадр описывает, как должен выглядеть анимированный элемент в текущий момент.

    -

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

    +

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

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

    Примеры

    -
    Внимание: Примеры ниже не используют префиксов для CSS стилей . Webkit-браузеры и старые версии других браузеров нуждаются в указании префиксов в CSS стилях. Примеры, на которые Вы можете кликнуть в своем браузере, также содержат префиксы -webkit-.
    +
    Внимание: Примеры ниже не используют префиксов для CSS стилей . Webkit-браузеры и старые версии других браузеров нуждаются в указании префиксов в CSS стилях. Примеры, на которые Вы можете кликнуть в своём браузере, также содержат префиксы -webkit-.

    Скольжение текста

    @@ -88,7 +88,7 @@ original_slug: Web/CSS/CSS_Animations/Ispolzovanie_CSS_animatciy

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

    -

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

    +

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

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

    @@ -97,7 +97,7 @@ at last the Caterpillar took the hookah out of its mouth, and addressed her in a languid, sleepy voice.</p> -

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

    +

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

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

    @@ -143,7 +143,7 @@ her in a languid, sleepy voice.</p>

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

    -

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

    +

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

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

    @@ -233,9 +233,9 @@ her in a languid, sleepy voice.</p>

    Установка нескольких значений свойствам анимации  

    -

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

    +

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

    -

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

    +

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

    animation-name: fadeInOut, moveLeft300px, bounce;
 animation-duration: 3s;
@@ -261,7 +261,7 @@ animation-iteration-count: 2, 1;

    Добавление CSS

    -

    Начнем с добавления CSS. Анимация будет длиться 3 секунды, будет называться "slidein", будет повторяться 3 раза, а также значение animation-direction установлено alternate. В ключевых кадрах {{ cssxref("@keyframes") }} установлены такие значения ширины и левого отступа, что элемент будет скользить по экрану.

    +

    Начнём с добавления CSS. Анимация будет длиться 3 секунды, будет называться "slidein", будет повторяться 3 раза, а также значение animation-direction установлено alternate. В ключевых кадрах {{ cssxref("@keyframes") }} установлены такие значения ширины и левого отступа, что элемент будет скользить по экрану.

    .slidein {
   -moz-animation-duration: 3s;
@@ -316,7 +316,7 @@ animation-iteration-count: 2, 1;

    Добавление обработчика события анимации

    -

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

    +

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

    var e = document.getElementById("watchme");
 e.addEventListener("animationstart", listener, false);
@@ -366,7 +366,7 @@ e.className = "slidein";
 
 
    HTML
    
 
-
    Ради полноты картины приведем код разметки HTML. В разметке имеется тег ul, в который и выводится вся информация:
    
+
    Ради полноты картины приведём код разметки HTML. В разметке имеется тег ul, в который и выводится вся информация:
    
 
 
    <body>
   <h1 id="watchme">Watch me move</h1>
-- 
cgit v1.2.3-54-g00ecf