main sync

Author: bogdanbacosca

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

@@ -80,7 +80,7 @@ Do note that, there are properties which can not be animated. However, [most of
 
 ## transition-duration
 
-In `transition-duration` we can specify how long the animation should take. The time should be in [CSS time format](http://www.w3.org/TR/css3-values/#time): in seconds `s` or milliseconds `ms`.
+In `transition-duration` we can specify how long the animation should take. The time should be in [CSS time format](https://www.w3.org/TR/css3-values/#time): in seconds `s` or milliseconds `ms`.
 
 ## transition-delay
 
@@ -210,7 +210,6 @@ Other names are shorthands for the following `cubic-bezier`:
 
 So we could use `ease-out` for our slowing down train:
 
-
 ```css
 .train {
   left: 0;
@@ -226,6 +225,7 @@ But it looks a bit differently.
 The control points on the curve can have any `y` coordinates: even negative or huge ones. Then the Bezier curve would also extend very low or high, making the animation go beyond its normal range.
 
 In the example below the animation code is:
+
 ```css
 .train {
   left: 100px;
@@ -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,26 +297,28 @@ 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:
 
 - `0s` -- `-10%` (first change in the beginning of the 1st second, immediately)
 - `1s` -- `-20%`
 - ...
-- `8s` -- `-80%`
+- `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.