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

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

Browse source 
Co-authored-by: Muhammed Zakir <8190126+MuhammedZakir@users.noreply.github.com>
This commit is contained in:
Ilya Kantor 2020-11-29 11:12:18 +03:00 • committed by GitHub
parent 5168eaa4b1
commit ebd774d28d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 5 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -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: