closes #3039, #3082

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

@@ -254,7 +254,15 @@ As we know, `y` measures "the completion of the animation process". The value `y
 
 That's a "soft" variant for sure. If we put `y` values like `-99` and `99` then the train would jump out of the range much more.
 
-But how do we make a Bezier curve for a specific task? There are many tools. For instance, we can do it on the site <http://cubic-bezier.com/>.
+But how do we make a Bezier curve for a specific task? There are many tools.
+
+- For instance, we can do it on the site <https://cubic-bezier.com>.
+- Browser developer tools also have special support for Bezier curves in CSS:
+    1. Open the developer tools with `key:F12` (Mac: `key:Cmd+Opt+I`).
+    2. Select the `Elements` tab, then pay attention to the `Styles` sub-panel at the right side.
+    3. CSS properties with a word `cubic-bezier` will have an icon before this word.
+    4. Click this icon to edit the curve.
+
 
 ### Steps
 
@@ -266,7 +274,19 @@ Here's a list of digits, without any animations, just as a source:
 
 [codetabs src="step-list"]
 
-We'll make the digits appear in a discrete way by making the part of the list outside of the red "window" invisible and shifting the list to the left with each step.
+In the HTML, a stripe of digits is enclosed into a fixed-length `<div id="digits">`:
+
+```html
+<div id="digit">
+  <div id="stripe">0123456789</div>
+</div>
+```
+
+The `#digit` div has a fixed width and a border, so it looks like a red window.
+
+We'll make a timer: the digits will appear one by one, in a discrete way.
+
+To achieve that, we'll hide the `#stripe` outside of `#digit` using `overflow: hidden`, and then shift the `#stripe` to the left step-by-step.
 
 There will be 9 steps, a step-move for each digit:
 
@@ -277,17 +297,17 @@ There will be 9 steps, a step-move for each digit:
 }
 ```
 
-In action:
-
-[codetabs src="step"]
-
 The first argument of `steps(9, start)` is the number of steps. The transform will be split into 9 parts (10% each). The time interval is automatically divided into 9 parts as well, so `transition: 9s` gives us 9 seconds for the whole animation – 1 second per digit.
 
 The second argument is one of two words: `start` or `end`.
 
 The `start` means that in the beginning of animation we need to make the first step immediately.
 
-We can observe that during the animation: when we click on the digit it changes to `1` (the first step) immediately, and then changes in the beginning of the next second.
+In action:
+
+[codetabs src="step"]
+
+A click on the digit changes it to `1` (the first step) immediately, and then changes in the beginning of the next second.
 
 The process is progressing like this:
 
@@ -297,6 +317,8 @@ The process is progressing like this:
 - `8s` -- `-90%`
 - (the last second shows the final value).
 
+Here, the first change was immediate because of `start` in the `steps`.
+
 The alternative value `end` would mean that the change should be applied not in the beginning, but at the end of each second.
 
 So the process for `steps(9, end)` would go like this:
@@ -307,20 +329,20 @@ So the process for `steps(9, end)` would go like this:
 - ...
 - `9s` -- `-90%`
 
-Here's `steps(9, end)` in action (note the pause between the first digit change):
+Here's `steps(9, end)` in action (note the pause before the first digit change):
 
 [codetabs src="step-end"]
 
-There are also shorthand values:
+There are also some pre-defined shorthands for `steps(...)`:
 
 - `step-start` -- is the same as `steps(1, start)`. That is, the animation starts immediately and takes 1 step. So it starts and finishes immediately, as if there were no animation.
 - `step-end` -- the same as `steps(1, end)`: make the animation in a single step at the end of `transition-duration`.
 
-These values are rarely used, because that's not really animation, but rather a single-step change.
+These values are rarely used, as they represent not a real animation, but rather a single-step change. We mention them here for completeness.
 
-## Event transitionend
+## Event: "transitionend"
 
-When the CSS animation finishes the `transitionend` event triggers.
+When the CSS animation finishes, the `transitionend` event triggers.
 
 It is widely used to do an action after the animation is done. Also we can join animations.