From d07faf31d1a7aa8c6e63edcec1c1ae4369a3ccdc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bogdan=20Baco=C8=99c=C4=83?= Date: Sun, 25 Dec 2022 16:07:03 +0200 Subject: [PATCH 01/23] line 3 suggestion --- 7-animation/2-css-animations/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/7-animation/2-css-animations/article.md b/7-animation/2-css-animations/article.md index c86cb452ea..d1ef76c004 100644 --- a/7-animation/2-css-animations/article.md +++ b/7-animation/2-css-animations/article.md @@ -1,6 +1,6 @@ # CSS-animations -CSS animations make it possible to do simple animations without JavaScript at all. +CSS animations make it possible to make simple animations without using JavaScript at all. JavaScript can be used to control CSS animations and make them even better, with little code. From 21f152bd737082a1d2e960b43f8fbf4fb9d8aa15 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bogdan=20Baco=C8=99c=C4=83?= Date: Sun, 25 Dec 2022 16:08:24 +0200 Subject: [PATCH 02/23] line 50 Shorthand property is a term often used when describing this type of declaration. Also added `in the same line` for more clarity --- 7-animation/2-css-animations/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/7-animation/2-css-animations/article.md b/7-animation/2-css-animations/article.md index d1ef76c004..84c3ab8ae0 100644 --- a/7-animation/2-css-animations/article.md +++ b/7-animation/2-css-animations/article.md @@ -47,7 +47,7 @@ There are 4 properties to describe CSS transitions: - `transition-timing-function` - `transition-delay` -We'll cover them in a moment, for now let's note that the common `transition` property allows declaring them together in the order: `property duration timing-function delay`, as well as animating multiple properties at once. +We'll cover them in a moment, for now let's note that the shorthand `transition` property allows declaring them together on the same line in the following order: `property duration timing-function delay`, as well as animating multiple properties at once. For instance, this button animates both `color` and `font-size`: From 43b30d7d14fbbcb12a2148a63389d51ec0adbc66 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bogdan=20Baco=C8=99c=C4=83?= Date: Sun, 25 Dec 2022 16:17:16 +0200 Subject: [PATCH 03/23] line 89 grammar fix --- 7-animation/2-css-animations/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/7-animation/2-css-animations/article.md b/7-animation/2-css-animations/article.md index 84c3ab8ae0..17096246ef 100644 --- a/7-animation/2-css-animations/article.md +++ b/7-animation/2-css-animations/article.md @@ -86,7 +86,7 @@ In `transition-duration` we can specify how long the animation should take. The In `transition-delay` we can specify the delay *before* the animation. For instance, if `transition-delay` is `1s` and `transition-duration` is `2s`, then the animation starts 1 second after the property change and the total duration will be 2 seconds. -Negative values are also possible. Then the animation is shown immediately, but the starting point of the animation will be after given value (time). For example, if `transition-delay` is `-1s` and `transition-duration` is `2s`, then animation starts from the halfway point and total duration will be 1 second. +Negative values are also possible. Then the animation is shown immediately, but the starting point of the animation will be after given value (time). For example, if `transition-delay` is `-1s` and `transition-duration` is `2s`, then the animation starts from the halfway point and the total duration will be 1 second. Here the animation shifts numbers from `0` to `9` using CSS `translate` property: From 76a5d9dc8eaa6f264c5f6cbc0c6c8f82e69b71ec Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bogdan=20Baco=C8=99c=C4=83?= Date: Sun, 25 Dec 2022 16:18:49 +0200 Subject: [PATCH 04/23] line 91 grammar fix --- 7-animation/2-css-animations/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/7-animation/2-css-animations/article.md b/7-animation/2-css-animations/article.md index 17096246ef..aacf01a2eb 100644 --- a/7-animation/2-css-animations/article.md +++ b/7-animation/2-css-animations/article.md @@ -88,7 +88,7 @@ In `transition-delay` we can specify the delay *before* the animation. For insta Negative values are also possible. Then the animation is shown immediately, but the starting point of the animation will be after given value (time). For example, if `transition-delay` is `-1s` and `transition-duration` is `2s`, then the animation starts from the halfway point and the total duration will be 1 second. -Here the animation shifts numbers from `0` to `9` using CSS `translate` property: +Here the animation shifts numbers from `0` to `9` using the CSS `translate` property: [codetabs src="digits"] From 8f14cc3660cbe5925d801ec10f2a6a31b875a804 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bogdan=20Baco=C8=99c=C4=83?= Date: Mon, 26 Dec 2022 17:58:20 +0200 Subject: [PATCH 05/23] line 144 --- 7-animation/2-css-animations/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/7-animation/2-css-animations/article.md b/7-animation/2-css-animations/article.md index aacf01a2eb..2bd9ba9355 100644 --- a/7-animation/2-css-animations/article.md +++ b/7-animation/2-css-animations/article.md @@ -141,7 +141,7 @@ The timing function can be set as a [Bezier curve](/bezier-curve) with 4 control 1. First control point: `(0,0)`. 2. Last control point: `(1,1)`. -3. For intermediate points, the values of `x` must be in the interval `0..1`, `y` can be anything. +3. For intermediate points, the values of `x` must be in the interval `0..1`, whereas `y` can be anything. The syntax for a Bezier curve in CSS: `cubic-bezier(x2, y2, x3, y3)`. Here we need to specify only 2nd and 3rd control points, because the 1st one is fixed to `(0,0)` and the 4th one is `(1,1)`. From c2554a4d91a4e4beabf7408c7bbdb06fe00b5fd6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bogdan=20Baco=C8=99c=C4=83?= Date: Mon, 26 Dec 2022 18:11:45 +0200 Subject: [PATCH 06/23] line 161 --- 7-animation/2-css-animations/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/7-animation/2-css-animations/article.md b/7-animation/2-css-animations/article.md index 2bd9ba9355..8cea676a9c 100644 --- a/7-animation/2-css-animations/article.md +++ b/7-animation/2-css-animations/article.md @@ -158,7 +158,7 @@ Here's how that curve looks: ...As we can see, it's just a straight line. As the time (`x`) passes, the completion (`y`) of the animation steadily goes from `0` to `1`. -The train in the example below goes from left to right with the permanent speed (click it): +The train in the example below goes from left to right at constant speed (click it): [codetabs src="train-linear"] From 95a363963fddd427b645cf1c86777dd309097d0e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bogdan=20Baco=C8=99c=C4=83?= Date: Mon, 26 Dec 2022 18:13:14 +0200 Subject: [PATCH 07/23] line 165 --- 7-animation/2-css-animations/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/7-animation/2-css-animations/article.md b/7-animation/2-css-animations/article.md index 8cea676a9c..4b044ff62d 100644 --- a/7-animation/2-css-animations/article.md +++ b/7-animation/2-css-animations/article.md @@ -162,7 +162,7 @@ The train in the example below goes from left to right at constant speed (click [codetabs src="train-linear"] -The CSS `transition` is based on that curve: +The CSS `transition` is based on this curve: ```css .train { From c7ecd214e12d88e325a80acce956165b5e54820c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bogdan=20Baco=C8=99c=C4=83?= Date: Mon, 26 Dec 2022 18:22:10 +0200 Subject: [PATCH 08/23] lines 171, 194, 233 updated train examples --- 7-animation/2-css-animations/article.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/7-animation/2-css-animations/article.md b/7-animation/2-css-animations/article.md index 4b044ff62d..77192cf4b5 100644 --- a/7-animation/2-css-animations/article.md +++ b/7-animation/2-css-animations/article.md @@ -168,7 +168,7 @@ The CSS `transition` is based on this curve: .train { left: 0; transition: left 5s cubic-bezier(0, 0, 1, 1); - /* click on a train sets left to 450px, thus triggering the animation */ + /* clicking on the train sets left to 450px, thus triggering the animation */ } ``` @@ -191,7 +191,7 @@ CSS: .train { left: 0; transition: left 5s cubic-bezier(0, .5, .5, 1); - /* click on a train sets left to 450px, thus triggering the animation */ + /* clicking on the train sets left to 450px, thus triggering the animation */ } ``` @@ -230,7 +230,7 @@ In the example below the animation code is: .train { left: 100px; transition: left 5s cubic-bezier(.5, -1, .5, 2); - /* click on a train sets left to 450px */ + /* clicking on the train sets left to 450px */ } ``` From 7a05d240aadd937a0c8561043c518031a14cd3c7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bogdan=20Baco=C8=99c=C4=83?= Date: Mon, 26 Dec 2022 18:24:10 +0200 Subject: [PATCH 09/23] line 202 --- 7-animation/2-css-animations/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/7-animation/2-css-animations/article.md b/7-animation/2-css-animations/article.md index 77192cf4b5..93f8f684f7 100644 --- a/7-animation/2-css-animations/article.md +++ b/7-animation/2-css-animations/article.md @@ -199,7 +199,7 @@ There are several built-in curves: `linear`, `ease`, `ease-in`, `ease-out` and ` The `linear` is a shorthand for `cubic-bezier(0, 0, 1, 1)` -- a straight line, which we described above. -Other names are shorthands for the following `cubic-bezier`: +The other names are shorthands for the following `cubic-bezier`: | ease* | ease-in | ease-out | ease-in-out | |-------------------------------|----------------------|-----------------------|--------------------------| From 7cbec54fbe95cb4e6226519645ded775fb1a5070 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bogdan=20Baco=C8=99c=C4=83?= Date: Tue, 27 Dec 2022 09:35:25 +0200 Subject: [PATCH 10/23] line 225 --- 7-animation/2-css-animations/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/7-animation/2-css-animations/article.md b/7-animation/2-css-animations/article.md index 93f8f684f7..5bd2fe529f 100644 --- a/7-animation/2-css-animations/article.md +++ b/7-animation/2-css-animations/article.md @@ -222,7 +222,7 @@ But it looks a bit differently. **A Bezier curve can make the animation exceed its range.** -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. +The control points on the curve can have any `y` coordinates: even negative or huge values. 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: From 1caea3da7b4e73479f4b651f4028100cb444fef0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bogdan=20Baco=C8=99c=C4=83?= Date: Tue, 27 Dec 2022 09:46:41 +0200 Subject: [PATCH 11/23] line 251 --- 7-animation/2-css-animations/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/7-animation/2-css-animations/article.md b/7-animation/2-css-animations/article.md index 5bd2fe529f..57c22679ff 100644 --- a/7-animation/2-css-animations/article.md +++ b/7-animation/2-css-animations/article.md @@ -248,7 +248,7 @@ Why it happens is pretty obvious if we look at the graph of the given Bezier cur ![](bezier-train-over.svg) -We moved the `y` coordinate of the 2nd point below zero, and for the 3rd point we made it over `1`, so the curve goes out of the "regular" quadrant. The `y` is out of the "standard" range `0..1`. +We moved the `y` coordinate of the 2nd point below zero and the 3rd point over `1`, so the curve goes out of the "regular" quadrant. The `y` is out of the "standard" range `0..1`. As we know, `y` measures "the completion of the animation process". The value `y = 0` corresponds to the starting property value and `y = 1` -- the ending value. So values `y<0` move the property beyond the starting `left` and `y>1` -- past the final `left`. From ae98a7777e7319a3e4c4bd4ba519d91f919a8832 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bogdan=20Baco=C8=99c=C4=83?= Date: Tue, 27 Dec 2022 09:57:56 +0200 Subject: [PATCH 12/23] line 253 --- 7-animation/2-css-animations/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/7-animation/2-css-animations/article.md b/7-animation/2-css-animations/article.md index 57c22679ff..cf2606e263 100644 --- a/7-animation/2-css-animations/article.md +++ b/7-animation/2-css-animations/article.md @@ -250,7 +250,7 @@ Why it happens is pretty obvious if we look at the graph of the given Bezier cur We moved the `y` coordinate of the 2nd point below zero and the 3rd point over `1`, so the curve goes out of the "regular" quadrant. The `y` is out of the "standard" range `0..1`. -As we know, `y` measures "the completion of the animation process". The value `y = 0` corresponds to the starting property value and `y = 1` -- the ending value. So values `y<0` move the property beyond the starting `left` and `y>1` -- past the final `left`. +As we know, `y` measures "the completion of the animation process". The value `y = 0` corresponds to the starting property value and `y = 1` -- the ending value. So values `y < 0` move the property beyond the starting `left` and `y > 1` -- past the final `left`. 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. From 82cdc7bd079bb8ae94dc4f41ffe10f6a4baa2def Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bogdan=20Baco=C8=99c=C4=83?= Date: Wed, 28 Dec 2022 11:09:11 +0200 Subject: [PATCH 13/23] line 289 --- 7-animation/2-css-animations/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/7-animation/2-css-animations/article.md b/7-animation/2-css-animations/article.md index cf2606e263..d049f14290 100644 --- a/7-animation/2-css-animations/article.md +++ b/7-animation/2-css-animations/article.md @@ -286,7 +286,7 @@ 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. +To achieve that, we'll hide the `#stripe` outside of `#digit` using `overflow: hidden`, then shift the `#stripe` to the left step-by-step. There will be 9 steps, a step-move for each digit: From a3cb9c3b05bdaf847b9bd4ea648be6c8c2ff9745 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bogdan=20Baco=C8=99c=C4=83?= Date: Wed, 28 Dec 2022 11:17:15 +0200 Subject: [PATCH 14/23] line 304 --- 7-animation/2-css-animations/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/7-animation/2-css-animations/article.md b/7-animation/2-css-animations/article.md index d049f14290..4422a2f1fa 100644 --- a/7-animation/2-css-animations/article.md +++ b/7-animation/2-css-animations/article.md @@ -301,7 +301,7 @@ The first argument of `steps(9, start)` is the number of steps. The transform wi 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. +The `start` means that we need to make the first step immediately in the beginning of the animation. In action: From 21e5e4422f76eebe483975c8fccf69adf4f37e0a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bogdan=20Baco=C8=99c=C4=83?= Date: Wed, 28 Dec 2022 11:22:30 +0200 Subject: [PATCH 15/23] line 310 --- 7-animation/2-css-animations/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/7-animation/2-css-animations/article.md b/7-animation/2-css-animations/article.md index 4422a2f1fa..ee6cf243c4 100644 --- a/7-animation/2-css-animations/article.md +++ b/7-animation/2-css-animations/article.md @@ -307,7 +307,7 @@ 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. +A click on the digit changes it to `1` (the first step) immediately, then it changes again in the beginning of the next second. The process is progressing like this: From 46a0fe73f714900eba0d74eedd4f758730b8e9d6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bogdan=20Baco=C8=99c=C4=83?= Date: Wed, 28 Dec 2022 11:26:48 +0200 Subject: [PATCH 16/23] line 324 --- 7-animation/2-css-animations/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/7-animation/2-css-animations/article.md b/7-animation/2-css-animations/article.md index ee6cf243c4..3715f5b67a 100644 --- a/7-animation/2-css-animations/article.md +++ b/7-animation/2-css-animations/article.md @@ -321,7 +321,7 @@ 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: +So the process for `steps(9, end)` would progress like this: - `0s` -- `0` (during the first second nothing changes) - `1s` -- `-10%` (first change at the end of the 1st second) From 91e89a4404fb914076ccd730d1fd057cb0b7fcdb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bogdan=20Baco=C8=99c=C4=83?= Date: Thu, 29 Dec 2022 10:26:43 +0200 Subject: [PATCH 17/23] line 441 --- 7-animation/2-css-animations/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/7-animation/2-css-animations/article.md b/7-animation/2-css-animations/article.md index 3715f5b67a..7340dde5f8 100644 --- a/7-animation/2-css-animations/article.md +++ b/7-animation/2-css-animations/article.md @@ -438,7 +438,7 @@ However, not all animations will look as smooth as you'd like, because different In more technical details, when there's a style change, the browser goes through 3 steps to render the new look: 1. **Layout**: re-compute the geometry and position of each element, then -2. **Paint**: re-compute how everything should look like at their places, including background, colors, +2. **Paint**: re-compute how everything should look like at their places, including background and colors, then 3. **Composite**: render the final results into pixels on screen, apply CSS transforms if they exist. During a CSS animation, this process repeats every frame. However, CSS properties that never affect geometry or position, such as `color`, may skip the Layout step. If a `color` changes, the browser doesn't calculate any new geometry, it goes to Paint -> Composite. And there are few properties that directly go to Composite. You can find a longer list of CSS properties and which stages they trigger at . From 0c2278c2a7351aedea2e22a409aaf2d3d714ac38 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bogdan=20Baco=C8=99c=C4=83?= Date: Thu, 29 Dec 2022 10:30:13 +0200 Subject: [PATCH 18/23] line 444 --- 7-animation/2-css-animations/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/7-animation/2-css-animations/article.md b/7-animation/2-css-animations/article.md index 7340dde5f8..3a999809a6 100644 --- a/7-animation/2-css-animations/article.md +++ b/7-animation/2-css-animations/article.md @@ -441,7 +441,7 @@ In more technical details, when there's a style change, the browser goes through 2. **Paint**: re-compute how everything should look like at their places, including background and colors, then 3. **Composite**: render the final results into pixels on screen, apply CSS transforms if they exist. -During a CSS animation, this process repeats every frame. However, CSS properties that never affect geometry or position, such as `color`, may skip the Layout step. If a `color` changes, the browser doesn't calculate any new geometry, it goes to Paint -> Composite. And there are few properties that directly go to Composite. You can find a longer list of CSS properties and which stages they trigger at . +During a CSS animation, this process repeats every frame. However, CSS properties that never affect geometry or position, such as `color`, may skip the Layout step. If a `color` changes, the browser doesn't calculate any new geometry, it goes to Paint -> Composite. And there are few properties that directly go to Composite. You can find a longer list of CSS properties and which stages they trigger at . The calculations may take time, especially on pages with many elements and a complex layout. And the delays are actually visible on most devices, leading to "jittery", less fluid animations. From 7a9f9027fdbadc7d741d5f7fcea562d787a5d422 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bogdan=20Baco=C8=99c=C4=83?= Date: Fri, 30 Dec 2022 07:18:13 +0200 Subject: [PATCH 19/23] line 347 --- 7-animation/2-css-animations/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/7-animation/2-css-animations/article.md b/7-animation/2-css-animations/article.md index 3a999809a6..7ed2a659a8 100644 --- a/7-animation/2-css-animations/article.md +++ b/7-animation/2-css-animations/article.md @@ -344,7 +344,7 @@ These values are rarely used, as they represent not a real animation, but rather 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. +It is widely used to do an action after the animation is done and to join multiple animations. For instance, the ship in the example below starts to sail there and back when clicked, each time farther and farther to the right: From dac65b5c829f0e87df0ff93665f8ed423ca4dd66 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bogdan=20Baco=C8=99c=C4=83?= Date: Sat, 31 Dec 2022 10:10:17 +0200 Subject: [PATCH 20/23] task 2 --- .../2-css-animations/2-animate-logo-bezier-css/solution.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/7-animation/2-css-animations/2-animate-logo-bezier-css/solution.md b/7-animation/2-css-animations/2-animate-logo-bezier-css/solution.md index 88105399cc..c0e3b83a50 100644 --- a/7-animation/2-css-animations/2-animate-logo-bezier-css/solution.md +++ b/7-animation/2-css-animations/2-animate-logo-bezier-css/solution.md @@ -1,6 +1,6 @@ -We need to choose the right Bezier curve for that animation. It should have `y>1` somewhere for the plane to "jump out". +We need to choose the right Bezier curve for that animation. It should have `y > 1` somewhere for the plane to "jump out". -For instance, we can take both control points with `y>1`, like: `cubic-bezier(0.25, 1.5, 0.75, 1.5)`. +For instance, we can take both control points with `y > 1`, like: `cubic-bezier(0.25, 1.5, 0.75, 1.5)`. The graph: From f85c6e9d3258b80cd88ea13d2d04379e0c34f7b3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bogdan=20Baco=C8=99c=C4=83?= Date: Sun, 1 Jan 2023 07:32:10 +0200 Subject: [PATCH 21/23] task 3 --- 7-animation/2-css-animations/3-animate-circle/task.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/7-animation/2-css-animations/3-animate-circle/task.md b/7-animation/2-css-animations/3-animate-circle/task.md index 83bbb3e84b..866f2a8c25 100644 --- a/7-animation/2-css-animations/3-animate-circle/task.md +++ b/7-animation/2-css-animations/3-animate-circle/task.md @@ -13,4 +13,4 @@ Click the button below to see how it should look like: [iframe src="solution" height=260] -The source document has an example of a circle with right styles, so the task is precisely to do the animation right. +The source document has an example of a circle with predefined styles, so the task is precisely to do the animation right. From 5b534a06c093db8c7925727263c746cf99ee939c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bogdan=20Baco=C8=99c=C4=83?= Date: Tue, 3 Jan 2023 06:48:54 +0200 Subject: [PATCH 22/23] Revert "line 289" This reverts commit 82cdc7bd079bb8ae94dc4f41ffe10f6a4baa2def. --- 7-animation/2-css-animations/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/7-animation/2-css-animations/article.md b/7-animation/2-css-animations/article.md index 7ed2a659a8..eda3430f7d 100644 --- a/7-animation/2-css-animations/article.md +++ b/7-animation/2-css-animations/article.md @@ -286,7 +286,7 @@ 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`, then shift the `#stripe` to the left step-by-step. +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: From dd1dda47592e987a75b049a2861c14b68e4eea84 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bogdan=20Baco=C8=99c=C4=83?= Date: Tue, 3 Jan 2023 06:53:28 +0200 Subject: [PATCH 23/23] Revert "line 310" This reverts commit 21e5e4422f76eebe483975c8fccf69adf4f37e0a. --- 7-animation/2-css-animations/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/7-animation/2-css-animations/article.md b/7-animation/2-css-animations/article.md index eda3430f7d..e44d0c35d8 100644 --- a/7-animation/2-css-animations/article.md +++ b/7-animation/2-css-animations/article.md @@ -307,7 +307,7 @@ In action: [codetabs src="step"] -A click on the digit changes it to `1` (the first step) immediately, then it changes again in the beginning of the next second. +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: