From 6dda47fbd79b45fc3b63090ee3bcc44b40421f0a Mon Sep 17 00:00:00 2001 From: Ilya Kantor Date: Sat, 26 Jun 2021 20:59:48 +0300 Subject: [PATCH] minor fixes --- 7-animation/2-css-animations/article.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/7-animation/2-css-animations/article.md b/7-animation/2-css-animations/article.md index bf3b6eb0..0332190d 100644 --- a/7-animation/2-css-animations/article.md +++ b/7-animation/2-css-animations/article.md @@ -435,11 +435,11 @@ The `transform` property is a great choice, because: 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. -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. +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. 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. -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. +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. Paring `transform` with `opacity` can usually solve most of our needs, providing fluid, good-looking animations.