Merge pull request #1722 from Rnbsov/patch-106

Обновление статьи "CSS-анимации"

Author: Alexandre887

7-animation/1-bezier-curve/article.md

@@ -1,9 +1,16 @@
+
 # Кривые Безье
 
 Кривые Безье используются в компьютерной графике для рисования плавных изгибов, в CSS-анимации и много где ещё.
 
 Это очень простая вещь, которую стоит изучить один раз, а затем чувствовать себя комфортно в мире векторной графики и продвинутых анимаций.
 
+```smart header="Немного теории"
+Эта статья даёт теоретическое, но очень необходимое представление о том, что такое кривые Безье, в то время как [следующая](info:css-animations#bezier-curve) показывает, как мы можем использовать их для CSS-анимаций.
+
+Пожалуйста, найдите время, чтобы прочитать и понять концепцию, это сослужит вам хорошую службу.
+```
+
 ## Опорные точки
 
 [Кривая Безье](https://ru.wikipedia.org/wiki/%D0%9A%D1%80%D0%B8%D0%B2%D0%B0%D1%8F_%D0%91%D0%B5%D0%B7%D1%8C%D0%B5) задаётся опорными точками.
@@ -69,12 +76,10 @@
 
     - Эти точки соединяются. На рисунке ниже соединяющий их отрезок изображён <span style="color:#167490">синим</span>.
 
-
 | При `t=0.25`             | При `t=0.5`            |
 | ------------------------ | ---------------------- |
 | ![](bezier3-draw1.svg)   | ![](bezier3-draw2.svg) |
 
-
 4. На получившемся <span style="color:#167490">синем</span> отрезке берётся точка на расстоянии, соответствующем `t`. То есть, для `t=0.25` (левый рисунок) получаем точку в конце первой четверти отрезка, для `t=0.5` (правый рисунок) – в середине отрезка. На рисунках выше эта точка отмечена <span style="color:red">красным</span>.
 
 5. По мере того, как `t` "пробегает" последовательность от `0` до `1`, каждое значение `t` добавляет к кривой точку. Совокупность таких точек для всех значений образует кривую Безье. Она <span style="color:red">красная</span> и имеет параболическую форму на картинках выше.
@@ -109,7 +114,6 @@
 **Запускайте и приостанавливайте примеры, чтобы ясно увидеть отрезки и то, как строится кривая.**
 ```
 
-
 Кривая, которая выглядит как `y=1/t`:
 
 [iframe src="demo.svg?p=0,0,0,0.75,0.25,1,1,1&animate=1" height=370]
@@ -140,7 +144,6 @@
 Для таких кривых существуют математические формулы, например, [полином Лагранжа](https://ru.wikipedia.org/wiki/%D0%98%D0%BD%D1%82%D0%B5%D1%80%D0%BF%D0%BE%D0%BB%D1%8F%D1%86%D0%B8%D0%BE%D0%BD%D0%BD%D1%8B%D0%B9_%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE%D1%87%D0%BB%D0%B5%D0%BD_%D0%9B%D0%B0%D0%B3%D1%80%D0%B0%D0%BD%D0%B6%D0%B0). В компьютерной графике [сплайн-интерполяция](https://ru.wikipedia.org/wiki/%D0%9A%D1%83%D0%B1%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B8%D0%B9_%D1%81%D0%BF%D0%BB%D0%B0%D0%B9%D0%BD) часто используется для построения плавных кривых, соединяющих множество точек.
 ```
 
-
 ## Математика
 
 Кривая Безье может быть описана с помощью математической формулы.

7-animation/2-css-animations/article.md

@@ -1,3 +1,4 @@
+
 # CSS-анимации
 
 CSS позволяет создавать простые анимации без использования JavaScript.
@@ -187,6 +188,7 @@ stripe.onclick = function() {
 [codetabs src="train"]
 
 CSS:
+
 ```css
 .train {
   left: 0;
@@ -254,7 +256,14 @@ CSS:
 
 Это, конечно, "мягкий" вариант. Если значение `y` будут `-99` и `99`, то поезд будет гораздо сильнее "выпрыгивать" за пределы.
 
-Как сделать кривую Безье необходимую для конкретной задачи? Существует множество инструментов, например можно использовать с сайта <https://cubic-bezier.com/>.
+Как сделать кривую Безье необходимую для конкретной задачи? Существует множество инструментов.
+
+- К примеру, мы можем сделать это на сайте <https://cubic-bezier.com>.
+- Браузернные инструменты разработчика также имеют специальную поддержку для создания кривых Безье в CSS:
+    1. Откройте инструменты разработчика при помощи `key:F12` (Mac: `key:Cmd+Opt+I`).
+    2. Выберете вкладку `Elements`, затем обратите внимание на под-панель `Styles` в правой стороне.
+    3. Свойства CSS со словом `cubic-bezier` будут иметь иконку перед этим словом.
+    4. Кликните по иконке, чтобы отредактировать кривую.
 
 ### Шаги
 
@@ -266,7 +275,19 @@ CSS:
 
 [codetabs src="step-list"]
 
-Давайте сделаем так, чтобы цифры двигались не плавно, а появлялись одна за другой раздельно. Для этого скроем все что находится за красным "окошком" и будем сдвигать список влево по шагам.
+В HTML, вереница цифр заключена в `<div id="digits">` фиксированной длины:
+
+```html
+<div id="digit">
+  <div id="stripe">0123456789</div>
+</div>
+```
+
+Div-элемент `#digit` имеет фиксированную ширину и границу, поэтому он выглядит как красное окно.
+
+Мы сделаем таймер: цифры будут появляться одна за другой, дискретно.
+
+Чтобы добиться этого, мы скроем `#stripe` за пределами `#digit`, используя `overflow: hidden`, а затем, шаг за шагом будем сдвигать `#stripe` влево.
 
 Всего будет 9 шагов, один шаг для каждой цифры:
 
@@ -277,17 +298,17 @@ CSS:
 }
 ```
 
-В действии:
-
-[codetabs src="step"]
-
 Первый аргумент временной функции `steps(9, start)` -- количество шагов. Трансформация будет разделена на 9 частей (10% каждая). Временной интервал также будет разделён на 9 частей, таким образом свойство `transition: 9s` обеспечивает нам 9 секунд анимации, что даёт по одной секунде на цифру.
 
 Вторым аргументом является одно из ключевых слов: `start` или `end`.
 
 `start` -- означает, что в начале анимации нам необходимо перейти на первый шаг немедленно.
 
-Мы можем наблюдать это во время анимации: когда пользователь нажимает на цифру, значение меняется на `1` (первый шаг) сразу и в следующий раз меняется уже в начале следующей секунды.
+В действии:
+
+[codetabs src="step"]
+
+Щелчок по цифре немедленно изменяет её на `1` (первый шаг), а затем изменяется в начале следующей секунды.
 
 Анимация будет происходить так:
 
@@ -297,6 +318,8 @@ CSS:
 - `8s` -- `-90%`
 - (на протяжении последней секунды отображается последнее значение).
 
+Здесь первое изменение было немедленным из-за `start` в `steps`.
+
 Альтернативное значение `end` означало бы, что изменения нужно применять не в начале, а в конце каждой секунды.
 
 Анимация будет происходить так:
@@ -307,18 +330,18 @@ CSS:
 - ...
 - `9s` -- `-90%`
 
-Пример `step(9, end)` в действии (обратите внимание на паузу между первым изменением цифр):
+Пример `step(9, end)` в действии (обратите внимание на паузу перед первым изменением цифры):
 
 [codetabs src="step-end"]
 
-Также есть сокращённые значения:
+Существуют также некоторые заранее определённые сокращения для `steps(...)`:
 
 - `step-start` -- то же самое, что `steps(1, start)`. Оно означает, что анимация начнётся сразу и произойдёт в один шаг. Таким образом она начнётся и завершится сразу, как будто и нет никакой анимации.
 - `step-end` -- то же самое, что `steps(1, end)`: выполнит анимацию за один шаг в конце `transition-duration`.
 
-Такие значения используются редко, потому что это не совсем анимация, а точнее будет сказать одношаговые изменения.
+Такие значения используются редко, потому что это не совсем анимация, а точнее будет сказать одношаговые изменения. Мы упоминаем их здесь для полноты картины.
 
-## Событие transitionend
+## Событие: "transitionend"
 
 Когда завершается анимация, срабатывает событие `transitionend`.