From 9bae8fdf3e3dd247db3aa998e898ca8b0633a77a Mon Sep 17 00:00:00 2001 From: Peter Kampjes <67612358+peachesontour@users.noreply.github.com> Date: Mon, 21 Sep 2020 18:25:55 -0300 Subject: [PATCH 01/12] Typos --- 7-animation/2-css-animations/article.md | 74 ++++++++++++------------- 1 file changed, 37 insertions(+), 37 deletions(-) diff --git a/7-animation/2-css-animations/article.md b/7-animation/2-css-animations/article.md index 38987b1c..d658e8bb 100644 --- a/7-animation/2-css-animations/article.md +++ b/7-animation/2-css-animations/article.md @@ -1,14 +1,14 @@ # CSS-animations -CSS animations allow to do simple animations without JavaScript at all. +CSS animations make it possible to do simple animations without JavaScript at all. -JavaScript can be used to control CSS animation and make it even better with a little of code. +JavaScript can be used to control CSS animations and make them even better, with little code. ## CSS transitions [#css-transition] The idea of CSS transitions is simple. We describe a property and how its changes should be animated. When the property changes, the browser paints the animation. -That is: all we need is to change the property. And the fluent transition is made by the browser. +That is: all we need is to change the property. And the fluid transition is done by the browser. For instance, the CSS below animates changes of `background-color` for 3 seconds: @@ -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 to declare them together in the order: `property duration timing-function delay`, and also animate multiple properties at once. +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. For instance, this button animates both `color` and `font-size`: @@ -70,13 +70,13 @@ growing.onclick = function() { ``` -Now let's cover animation properties one by one. +Now, let's cover animation properties one by one. ## transition-property -In `transition-property` we write a list of property to animate, for instance: `left`, `margin-left`, `height`, `color`. +In `transition-property` we write a list of properties to animate, for instance: `left`, `margin-left`, `height`, `color`. -Not all properties can be animated, but [many of them](http://www.w3.org/TR/css3-transitions/#animatable-properties-). The value `all` means "animate all properties". +Not all properties can be animated, but [many of them can](http://www.w3.org/TR/css3-transitions/#animatable-properties-). The value `all` means "animate all properties". ## transition-duration @@ -84,11 +84,11 @@ In `transition-duration` we can specify how long the animation should take. The ## transition-delay -In `transition-delay` we can specify the delay *before* the animation. For instance, if `transition-delay: 1s`, then animation starts after 1 second after the change. +In `transition-delay` we can specify the delay *before* the animation. For instance, if `transition-delay: 1s`, then the animation starts 1 second after the property change. -Negative values are also possible. Then the animation starts from the middle. For instance, if `transition-duration` is `2s`, and the delay is `-1s`, then the animation takes 1 second and starts from the half. +Negative values are also possible. Then the animation starts from the middle. For instance, if `transition-duration` is `2s`, and the delay is `-1s`, then the animation takes 1 second and starts from the halfway point. -Here's the animation shifts numbers from `0` to `9` using CSS `translate` property: +Here the animation shifts numbers from `0` to `9` using CSS `translate` property: [codetabs src="digits"] @@ -108,13 +108,13 @@ In the example above JavaScript adds the class `.animate` to the element -- and stripe.classList.add('animate'); ``` -We can also start it "from the middle", from the exact number, e.g. corresponding to the current second, using the negative `transition-delay`. +We could also start it from somewhere in the middle of the transition, from an exact number, e.g. corresponding to the current second, using a negative `transition-delay`. Here if you click the digit -- it starts the animation from the current second: [codetabs src="digits-negative-delay"] -JavaScript does it by an extra line: +JavaScript does it with an extra line: ```js stripe.onclick = function() { @@ -129,25 +129,25 @@ stripe.onclick = function() { ## transition-timing-function -Timing function describes how the animation process is distributed along the time. Will it start slowly and then go fast or vise versa. +The timing function describes how the animation process is distributed along its timeline. Will it start slowly and then go fast or vice versa. -That's the most complicated property from the first sight. But it becomes very simple if we devote a bit time to it. +It appears to be the most complicated property at first. But it becomes very simple if we devote a bit time to it. -That property accepts two kinds of values: a Bezier curve or steps. Let's start from the curve, as it's used more often. +That property accepts two kinds of values: a Bezier curve or steps. Let's start with the curve, as it's used more often. ### Bezier curve -The timing function can be set as a [Bezier curve](/bezier-curve) with 4 control points that satisfies the conditions: +The timing function can be set as a [Bezier curve](/bezier-curve) with 4 control points that satisfy the conditions: 1. First control point: `(0,0)`. 2. Last control point: `(1,1)`. -3. For intermediate points 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`, `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)`. -The timing function describes how fast the animation process goes in time. +The timing function describes how fast the animation process goes. -- The `x` axis is the time: `0` -- the starting moment, `1` -- the last moment of `transition-duration`. +- The `x` axis is the time: `0` -- the start, `1` -- the end of `transition-duration`. - The `y` axis specifies the completion of the process: `0` -- the starting value of the property, `1` -- the final value. The simplest variant is when the animation goes uniformly, with the same linear speed. That can be specified by the curve `cubic-bezier(0, 0, 1, 1)`. @@ -197,7 +197,7 @@ CSS: There are several built-in curves: `linear`, `ease`, `ease-in`, `ease-out` and `ease-in-out`. -The `linear` is a shorthand for `cubic-bezier(0, 0, 1, 1)` -- a straight line, we saw it already. +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`: @@ -221,9 +221,9 @@ So we could use `ease-out` for our slowing down train: But it looks a bit differently. -**A Bezier curve can make the animation "jump out" of its range.** +**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. Then the Bezier curve would also jump 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 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 @@ -244,21 +244,21 @@ But if you click the train, you'll see that: [codetabs src="train-over"] -Why it happens -- pretty obvious if we look at the graph of the given Bezier curve: +Why it happens is pretty obvious if we look at the graph of the given Bezier curve: ![](bezier-train-over.svg) -We moved the `y` coordinate of the 2nd point below zero, and for the 3rd point we made put 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 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`. -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 lower than the starting `left` and `y>1` -- over 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 than 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. -But how to make the Bezier curve for a specific task? There are many tools. For instance, we can do it on the site . +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 . ### Steps -Timing function `steps(number of steps[, start/end])` allows to split animation into steps. +The timing function `steps(number of steps[, start/end])` allows splitting an animation into steps. Let's see that in an example with digits. @@ -324,11 +324,11 @@ 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. -For instance, the ship in the example below starts to swim there and back on click, each time farther and farther to the right: +For instance, the ship in the example below starts to sail there and back when clicked, each time farther and farther to the right: [iframe src="boat" height=300 edit link] -The animation is initiated by the function `go` that re-runs each time when the transition finishes and flips the direction: +The animation is initiated by the function `go` that re-runs each time the transition finishes, and flips the direction: ```js boat.onclick = function() { @@ -337,11 +337,11 @@ boat.onclick = function() { function go() { if (times % 2) { - // swim to the right + // sail to the right boat.classList.remove('back'); boat.style.marginLeft = 100 * times + 200 + 'px'; } else { - // swim to the left + // sail to the left boat.classList.add('back'); boat.style.marginLeft = 100 * times - 200 + 'px'; } @@ -357,7 +357,7 @@ boat.onclick = function() { }; ``` -The event object for `transitionend` has few specific properties: +The event object for `transitionend` has a few specific properties: `event.propertyName` : The property that has finished animating. Can be good if we animate multiple properties simultaneously. @@ -369,7 +369,7 @@ The event object for `transitionend` has few specific properties: We can join multiple simple animations together using the `@keyframes` CSS rule. -It specifies the "name" of the animation and rules: what, when and where to animate. Then using the `animation` property we attach the animation to the element and specify additional parameters for it. +It specifies the "name" of the animation and rules: what, when and where to animate. Then using the `animation` property we can attach the animation to the element and specify additional parameters for it. Here's an example with explanations: @@ -405,11 +405,11 @@ Here's an example with explanations: There are many articles about `@keyframes` and a [detailed specification](https://drafts.csswg.org/css-animations/). -Probably you won't need `@keyframes` often, unless everything is in the constant move on your sites. +You probably won't need `@keyframes` often, unless everything is in constant motion on your sites. ## Summary -CSS animations allow to smoothly (or not) animate changes of one or multiple CSS properties. +CSS animations allow smoothly (or not) animated changes of one or multiple CSS properties. They are good for most animation tasks. We're also able to use JavaScript for animations, the next chapter is devoted to that. @@ -419,9 +419,9 @@ Limitations of CSS animations compared to JavaScript animations: + Simple things done simply. + Fast and lightweight for CPU. - JavaScript animations are flexible. They can implement any animation logic, like an "explosion" of an element. -- Not just property changes. We can create new elements in JavaScript for purposes of animation. +- Not just property changes. We can create new elements in JavaScript as part of the animation. ``` -The majority of animations can be implemented using CSS as described in this chapter. And `transitionend` event allows to run JavaScript after the animation, so it integrates fine with the code. +The majority of animations can be implemented using CSS as described in this chapter. And the `transitionend` event allows JavaScript to be run after the animation, so it integrates fine with the code. But in the next chapter we'll do some JavaScript animations to cover more complex cases. From 2b8354b305cc63afacdd6279e393e436123b4ca2 Mon Sep 17 00:00:00 2001 From: Peter Kampjes <67612358+peachesontour@users.noreply.github.com> Date: Tue, 22 Sep 2020 19:00:26 -0300 Subject: [PATCH 02/12] Update 7-animation/2-css-animations/article.md Co-authored-by: Muhammed Zakir <8190126+MuhammedZakir@users.noreply.github.com> --- 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 d658e8bb..ceb95cc9 100644 --- a/7-animation/2-css-animations/article.md +++ b/7-animation/2-css-animations/article.md @@ -8,7 +8,7 @@ JavaScript can be used to control CSS animations and make them even better, with The idea of CSS transitions is simple. We describe a property and how its changes should be animated. When the property changes, the browser paints the animation. -That is: all we need is to change the property. And the fluid transition is done by the browser. +That is, all we need is to change the property; and, the fluid transition will be done by the browser. For instance, the CSS below animates changes of `background-color` for 3 seconds: From 7c12746dc06d2bf3601c856902c6ff590f440927 Mon Sep 17 00:00:00 2001 From: Peter Kampjes <67612358+peachesontour@users.noreply.github.com> Date: Tue, 22 Sep 2020 19:01:20 -0300 Subject: [PATCH 03/12] Update 7-animation/2-css-animations/article.md Co-authored-by: Muhammed Zakir <8190126+MuhammedZakir@users.noreply.github.com> --- 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 ceb95cc9..a19c0a46 100644 --- a/7-animation/2-css-animations/article.md +++ b/7-animation/2-css-animations/article.md @@ -74,7 +74,7 @@ Now, let's cover animation properties one by one. ## transition-property -In `transition-property` we write a list of properties to animate, for instance: `left`, `margin-left`, `height`, `color`. +In `transition-property`, we write a list of properties to animate, for instance: `left`, `margin-left`, `height`, `color`. Or we could write `all`, which means "animate all properties". Not all properties can be animated, but [many of them can](http://www.w3.org/TR/css3-transitions/#animatable-properties-). The value `all` means "animate all properties". From 74526b48006542bb507db18e5e52b13ea7ebb404 Mon Sep 17 00:00:00 2001 From: Peter Kampjes <67612358+peachesontour@users.noreply.github.com> Date: Tue, 22 Sep 2020 19:34:23 -0300 Subject: [PATCH 04/12] Update 7-animation/2-css-animations/article.md Co-authored-by: Muhammed Zakir <8190126+MuhammedZakir@users.noreply.github.com> --- 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 a19c0a46..36b280f5 100644 --- a/7-animation/2-css-animations/article.md +++ b/7-animation/2-css-animations/article.md @@ -76,7 +76,7 @@ Now, let's cover animation properties one by one. In `transition-property`, we write a list of properties to animate, for instance: `left`, `margin-left`, `height`, `color`. Or we could write `all`, which means "animate all properties". -Not all properties can be animated, but [many of them can](http://www.w3.org/TR/css3-transitions/#animatable-properties-). The value `all` means "animate all properties". +Do note that, there are properties which can not be animated. However, [most of the generally used properties are animatable](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties). ## transition-duration From e0db05885134c0f2800770d3a87b60cc9e741e4c Mon Sep 17 00:00:00 2001 From: Peter Kampjes <67612358+peachesontour@users.noreply.github.com> Date: Tue, 22 Sep 2020 19:38:22 -0300 Subject: [PATCH 05/12] Update 7-animation/2-css-animations/article.md Co-authored-by: Muhammed Zakir <8190126+MuhammedZakir@users.noreply.github.com> --- 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 36b280f5..f543ed55 100644 --- a/7-animation/2-css-animations/article.md +++ b/7-animation/2-css-animations/article.md @@ -84,7 +84,7 @@ In `transition-duration` we can specify how long the animation should take. The ## transition-delay -In `transition-delay` we can specify the delay *before* the animation. For instance, if `transition-delay: 1s`, then the animation starts 1 second after the property change. +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 starts from the middle. For instance, if `transition-duration` is `2s`, and the delay is `-1s`, then the animation takes 1 second and starts from the halfway point. From ed497e7e9c2156894cf2b00771cd4b41687055a1 Mon Sep 17 00:00:00 2001 From: Peter Kampjes <67612358+peachesontour@users.noreply.github.com> Date: Tue, 22 Sep 2020 19:50:12 -0300 Subject: [PATCH 06/12] Update 7-animation/2-css-animations/article.md Co-authored-by: Muhammed Zakir <8190126+MuhammedZakir@users.noreply.github.com> --- 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 f543ed55..686bd0c9 100644 --- a/7-animation/2-css-animations/article.md +++ b/7-animation/2-css-animations/article.md @@ -129,7 +129,7 @@ stripe.onclick = function() { ## transition-timing-function -The timing function describes how the animation process is distributed along its timeline. Will it start slowly and then go fast or vice versa. +The timing function describes how the animation process is distributed along its timeline. Will it start slowly and then go fast, or vice versa. It appears to be the most complicated property at first. But it becomes very simple if we devote a bit time to it. From 2be35c995150936bc4ff370d3eb54f274b6d1b6f Mon Sep 17 00:00:00 2001 From: Peter Kampjes <67612358+peachesontour@users.noreply.github.com> Date: Tue, 22 Sep 2020 19:51:14 -0300 Subject: [PATCH 07/12] Update 7-animation/2-css-animations/article.md Co-authored-by: Muhammed Zakir <8190126+MuhammedZakir@users.noreply.github.com> --- 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 686bd0c9..7036f4c6 100644 --- a/7-animation/2-css-animations/article.md +++ b/7-animation/2-css-animations/article.md @@ -369,7 +369,7 @@ The event object for `transitionend` has a few specific properties: We can join multiple simple animations together using the `@keyframes` CSS rule. -It specifies the "name" of the animation and rules: what, when and where to animate. Then using the `animation` property we can attach the animation to the element and specify additional parameters for it. +It specifies the "name" of the animation and rules - what, when and where to animate. Then using the `animation` property, we can attach the animation to the element and specify additional parameters for it. Here's an example with explanations: From 443af20b99c70939367ecec501f0fa6fd399434b Mon Sep 17 00:00:00 2001 From: Peter Kampjes <67612358+peachesontour@users.noreply.github.com> Date: Tue, 22 Sep 2020 19:51:52 -0300 Subject: [PATCH 08/12] Update 7-animation/2-css-animations/article.md Co-authored-by: Muhammed Zakir <8190126+MuhammedZakir@users.noreply.github.com> --- 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 7036f4c6..60f6e249 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`, `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 f25dca843a7ce2f7fd9367679a63bc7d8b16a64d Mon Sep 17 00:00:00 2001 From: Peter Kampjes <67612358+peachesontour@users.noreply.github.com> Date: Tue, 22 Sep 2020 20:46:33 -0300 Subject: [PATCH 09/12] Update 7-animation/2-css-animations/article.md Co-authored-by: Muhammed Zakir <8190126+MuhammedZakir@users.noreply.github.com> --- 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 60f6e249..bdee6303 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 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`. -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 than 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 6c37da4a66c698ce9215fb0f97c65bff2c851437 Mon Sep 17 00:00:00 2001 From: Peter Kampjes <67612358+peachesontour@users.noreply.github.com> Date: Wed, 23 Sep 2020 07:59:54 -0300 Subject: [PATCH 10/12] Update 7-animation/2-css-animations/article.md Co-authored-by: Muhammed Zakir <8190126+MuhammedZakir@users.noreply.github.com> --- 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 bdee6303..f8c68f66 100644 --- a/7-animation/2-css-animations/article.md +++ b/7-animation/2-css-animations/article.md @@ -84,7 +84,7 @@ In `transition-duration` we can specify how long the animation should take. The ## transition-delay -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. +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 starts from the middle. For instance, if `transition-duration` is `2s`, and the delay is `-1s`, then the animation takes 1 second and starts from the halfway point. From 5168eaa4b182fe4133e4bb66bfe52851640c1b83 Mon Sep 17 00:00:00 2001 From: Peter Kampjes <67612358+peachesontour@users.noreply.github.com> Date: Wed, 23 Sep 2020 08:00:53 -0300 Subject: [PATCH 11/12] Update 7-animation/2-css-animations/article.md Co-authored-by: Muhammed Zakir <8190126+MuhammedZakir@users.noreply.github.com> --- 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 f8c68f66..b2ef821f 100644 --- a/7-animation/2-css-animations/article.md +++ b/7-animation/2-css-animations/article.md @@ -8,7 +8,7 @@ JavaScript can be used to control CSS animations and make them even better, with The idea of CSS transitions is simple. We describe a property and how its changes should be animated. When the property changes, the browser paints the animation. -That is, all we need is to change the property; and, the fluid transition will be done by the browser. +That is, all we need is to change the property, and the fluid transition will be done by the browser. For instance, the CSS below animates changes of `background-color` for 3 seconds: From ebd774d28d0deb0a108cbf3506ceb4133b4804a2 Mon Sep 17 00:00:00 2001 From: Ilya Kantor Date: Sun, 29 Nov 2020 11:12:18 +0300 Subject: [PATCH 12/12] Update 7-animation/2-css-animations/article.md Co-authored-by: Muhammed Zakir <8190126+MuhammedZakir@users.noreply.github.com> --- 7-animation/2-css-animations/article.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/7-animation/2-css-animations/article.md b/7-animation/2-css-animations/article.md index b2ef821f..e320520a 100644 --- a/7-animation/2-css-animations/article.md +++ b/7-animation/2-css-animations/article.md @@ -86,7 +86,11 @@ 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 starts from the middle. For instance, if `transition-duration` is `2s`, and the delay is `-1s`, then the animation takes 1 second and starts from the halfway point. +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. You can think it like this: + + `transition-delay + transition-duration = animation duration` + +So, if for instance, `transition-delay` is `-2s` and `transition-duration` is `2s`, then it will be as if there was no transitioning animation for that property and the changes are shown instantly. Therefore, "animation duration" must always be greater than `0s` for any animation to be shown. Here the animation shifts numbers from `0` to `9` using CSS `translate` property: