From ebd774d28d0deb0a108cbf3506ceb4133b4804a2 Mon Sep 17 00:00:00 2001 From: Ilya Kantor Date: Sun, 29 Nov 2020 11:12:18 +0300 Subject: [PATCH] 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: