Skip to content

Commit 6dda47f

Browse files
committed
minor fixes
1 parent 54688eb commit 6dda47f

File tree

1 file changed

+2
-2
lines changed

1 file changed

+2
-2
lines changed

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -435,11 +435,11 @@ The `transform` property is a great choice, because:
435435

436436
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.
437437

438-
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.
438+
Changes (animations) of the `transform` property never trigger 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.
439439

440440
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). So instead of `left/margin-left` properties we can use `transform: translateX(…)`, use `transform: scale` for increasing element size, etc.
441441

442-
The `opacity` property also never causes Layout (also skips Paint in Mozilla Gecko). We can use it for show/hide or fade-in/fade-out effects.
442+
The `opacity` property also never triggers Layout (also skips Paint in Mozilla Gecko). We can use it for show/hide or fade-in/fade-out effects.
443443

444444
Paring `transform` with `opacity` can usually solve most of our needs, providing fluid, good-looking animations.
445445

0 commit comments

Comments
 (0)