fix
This commit is contained in:
parent
1fb7296f72
commit
e37d4ac498
6 changed files with 28 additions and 23 deletions
|
@ -8,7 +8,7 @@ Show the animation like on the picture below (click the plane):
|
|||
|
||||
[iframe src="solution" height=300]
|
||||
|
||||
- The picture grows on click from 40x24px to 400x240px.
|
||||
- The picture grows on click from `40x24px` to `400x240px` (10 times larger).
|
||||
- The animation takes 3 seconds.
|
||||
- At the end output: "Done!".
|
||||
- During the animation process, there may be more clicks. They shouldn't "break" anything.
|
||||
- During the animation process, there may be more clicks on the plane. They shouldn't "break" anything.
|
||||
|
|
|
@ -399,24 +399,25 @@ Here's an example with explanations:
|
|||
</style>
|
||||
```
|
||||
|
||||
There are many articles about `@keyframes` and a [detailed specification](https://drafts.csswg.org/css-animations/), so we won't go into more details here.
|
||||
There are many articles about `@keyframes` and a [detailed specification](https://drafts.csswg.org/css-animations/).
|
||||
|
||||
Probably you won't need it often, unless everything is in the constant move on your sites.
|
||||
Probably you won't need `@keyframes` often, unless everything is in the constant move on your sites.
|
||||
|
||||
## Summary
|
||||
|
||||
CSS animations allow to smoothly (or not) animate changes to one or multiple CSS properties.
|
||||
CSS animations allow to smoothly (or not) animate 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.
|
||||
|
||||
Limitations of CSS animations compared to JavaScript animations:
|
||||
|
||||
```compare
|
||||
- JavaScript animations are more flexible. They can implement any animation logic, like "explosion" of an element. We can create new elements in JavaScript for purposes of animation.
|
||||
+ Simple things done simple.
|
||||
+ Fast and easy for CPU.
|
||||
```compare plus="CSS animations" minus="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.
|
||||
```
|
||||
|
||||
The vast majority of animations uses the described CSS properties. And maybe the `transitionend` event to bind some JavaScript after it.
|
||||
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.
|
||||
|
||||
But in the next chapter we'll do some JavaScript animations to cover more complex cases.
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue