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 2021-06-24 22:41:26 +03:00
parent 7d838b3452
commit 32f01fb6b1
1 changed files with 4 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -421,9 +421,9 @@ In more technical details, when there's a style change, the browser goes through
During a CSS animation, this process repeats every frame. However, CSS properties that never affect geometry or position, such as `color`, may skip the Layout step. If a `color` changes, the browser doesn't calculate any new geometry, it goes to Paint -> Composite. And there are few properties that directly go to Composite. During a CSS animation, this process repeats every frame. However, CSS properties that never affect geometry or position, such as `color`, may skip the Layout step. If a `color` changes, the browser doesn't calculate any new geometry, it goes to Paint -> Composite. And there are few properties that directly go to Composite.
The Layout step is by far the most expensive: geometry calculations take time, especially on pages with many elements and a complex layout. And the delays are actually visible on most devices, leading to "jittery", less fluid animations. The calculations may take time, especially on pages with many elements and a complex layout. And the delays are actually visible on most devices, leading to "jittery", less fluid animations.
**The general recomendation is to animate properties that don't do Layout.** The animations of properties that skip the Layout and Paint steps are faster.
For most CSS properties, the rule is simple: if its change may affect geometry, move elements (even in theory), then it triggers Layout. Otherwise (e.g. a `color` change may not shift elements around), the browser doesn't need to calculate geometry and directly goes to Paint, or even Composite step. You can find a longer list of CSS properties and which stages they trigger at <https://csstriggers.com>. For most CSS properties, the rule is simple: if its change may affect geometry, move elements (even in theory), then it triggers Layout. Otherwise (e.g. a `color` change may not shift elements around), the browser doesn't need to calculate geometry and directly goes to Paint, or even Composite step. You can find a longer list of CSS properties and which stages they trigger at <https://csstriggers.com>.
@ -435,11 +435,11 @@ So browsers apply `transform` "on top" of existing Layout and Paint calculations
In other words, the browser calculates the Layout (sizes, positions), paints it with colors, backgrounds, etc at the Paint stage, and then applies `transform` to element boxes that need it. In other words, the browser calculates the Layout (sizes, positions), paints it with colors, backgrounds, etc at the Paint stage, and then applies `transform` to element boxes that need it.
Animating the `transform` property never causes Layout and Paint. More than that, the browser leverages the graphics accelerator (a special chip on the CPU or graphics card) for CSS transforms, thus making them very effecient. Changes (animations) of the `transform` property never cause Layout and Paint steps. More than that, the browser leverages the graphics accelerator (a special chip on the CPU or graphics card) for CSS transforms, thus making them very effecient.
Luckily, the `transform` property is very powerful. By using `transform` on an element, you could rotate and flip it, stretch and shrink it, move it around, and [much more](https://developer.mozilla.org/docs/Web/CSS/transform#syntax). Luckily, the `transform` property is very powerful. By using `transform` on an element, you could rotate and flip it, stretch and shrink it, move it around, and [much more](https://developer.mozilla.org/docs/Web/CSS/transform#syntax).
The `opacity` property also never causes Layout. We can use it for show / hide or fade-in / fade-out effects. The `opacity` property also never causes Layout (also skips Paint in Gecko). We can use it for show / hide or fade-in / fade-out effects.
Paring `transform` with `opacity` can usually solve most of our needs, providing fluid, good-looking animations. Paring `transform` with `opacity` can usually solve most of our needs, providing fluid, good-looking animations.