jeena/en.javascript.info
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

minor fixes

Browse source
This commit is contained in:
Ilya Kantor 2020-11-29 11:14:29 +03:00
parent 00f138c611
commit 6f7d9cf0f8
1 changed files with 1 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

6
7-animation/2-css-animations/article.md
View file

@ -86,11 +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. 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. You can think it like this: 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.
`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: Here the animation shifts numbers from `0` to `9` using CSS `translate` property: