С осторожностью в анимировании

Свойства CSS, которые нельзя анимировать

Не все CSS-свойства можно анимировать. Это связано с тем, что некоторые свойства не имеют промежуточных значений, а другие слишком сложны для интерполяции (плавного перехода между значениями).

Анимация работает с числовыми значениями, которые можно постепенно изменять. Если свойство не имеет числового значения или его изменение происходит скачкообразно, анимировать его не получится.

Вот список ключевых CSS-свойств, которые не поддаются анимации:

1. display

Одно из наиболее распространённых свойств, которые невозможно анимировать. Это связано с тем, что у его значений (например, block, none, flex) нет промежуточных состояний. Например, нельзя плавно анимировать переход от display: none к display: block — это мгновенное изменение.

Альтернативы: можно использовать opacity и visibility для создания эффекта исчезновения/появления элементов.

2. visibility

Свойство visibility можно изменять через CSS (например, visible и hidden), но его анимация ограничена, потому что это свойство не имеет промежуточных значений.

Но мы можем создать задержку перед изменением видимости, чтобы добиться эффекта плавной анимации. Для этого можно использовать visibility в сочетании с opacity.

3. position

Отвечает за позиционирование элемента на странице. Его значения (static, relative, absolute, fixed, sticky) нельзя плавно изменять. Например, переключение между absolute и fixed происходит мгновенно.

Альтернативы: можно анимировать свойства, связанные с позиционированием, такие как top, left, right, bottom, и использовать transform для более сложных перемещений.

4. float

Как и position, свойство float не поддается анимации. Переход между float: left и float: right происходит мгновенно, поскольку это нечисловое свойство.

Альтернатива: для анимации элементов, плавающих по сторонам, можно использовать transform: translateX ().

5. z-index

Это значение отвечает за порядок наложения элементов, но его анимация невозможна, так как оно относится к целочисленным значениям, которые также не имеют промежуточных состояний.

6. background-image

Анимировать фон, задаваемый через background-image, нельзя, потому что изменение изображения происходит резко.

Альтернатива: для создания плавных эффектов смены фона можно использовать псевдоэлементы (: before, : after) или opacity для наложения изображений.

7. clip-path с нечисловыми значениями

Хотя clip-path поддерживает анимацию, это возможно только в случае использования числовых значений. Если используются сложные формы или изображения (например, circle () или polygon ()), это сильно ограничивает плавность анимации.

Заключение

При создании анимаций в CSS важно помнить, что не все свойства можно анимировать. Это связано с тем, что некоторые значения не являются числовыми или изменяются слишком резко для плавной интерполяции.

Зная ограничения анимации CSS-свойств, мы можем найти альтернативные решения. Например, использовать свойства opacity, transform и другие, чтобы добиться похожих эффектов.

Влияние анимаций на производительность: Reflow, Repaint и Layout Shift

Создавая анимации в браузере, важно понимать, как работают процессы отрисовки элементов на странице: reflow, repaint и layout shift. Они напрямую влияют на производительность и плавность анимаций.

1. Reflow (Перерасчет размещения, или перерасчет геометрии)

Reflow (или layout) — это процесс, в котором браузер пересчитывает положение и размер элементов на странице. Когда мы меняем элемент, который влияет на размеры, отступы или общую структуру документа, браузер должен пересчитать весь layout (разметку) страницы или его часть.

Что вызывает reflow?

Изменение размеров элементов (например, изменение width, height, margin, padding).
Изменение положения элементов (например, top, left).
Добавление или удаление элементов DOM.
Изменение структуры DOM, например, добавление нового блока, перемещение элементов.
Изменение размеров окна браузера.

Reflow — это ресурсоемкий процесс для браузера, так как может затронуть не только измененный элемент, но и другие элементы, которые зависят от его позиции или размера.

Пример:

const element = document.getElementById('box');
element.style.width = '200px'; // Вызовет reflow, так как изменяется ширина элемента

2. Repaint (перерисовка)

Repaint — это процесс перерисовки элемента на экране после того, как изменяются его визуальные свойства, такие как цвет, тень, фон или границы, которые не влияют на его размеры или положение.

Repaint менее затратен, чем reflow, так как браузеру не нужно пересчитывать всю структуру документа, а требуется лишь перерисовать внешний вид элементов.

Что вызывает repaint?

Изменение цвета фона или текста (background-color, color).
Изменение прозрачности (opacity).
Изменение границ (border).

Пример:

const element = document.getElementById('box');
element.style.backgroundColor = 'blue'; // Вызовет repaint, так как меняется цвет фона

3. Layout Shift (смещение макета)

Layout Shift — это неожиданное смещение элементов страницы после ее загрузки, вызванное динамическими изменениями в разметке. Оно может привести к «прыжкам» содержимого, что негативно сказывается на пользовательском опыте.

Cumulative Layout Shift (CLS) — это метрика, которая измеряет стабильность макета страницы. Чем больше внезапных сдвигов происходят на странице, тем выше показатель CLS, что считается негативным фактором.

Что вызывает layout shift?

Загрузка изображений или медиа без указания явных размеров.
Динамическое добавление контента (например, объявления, вставляемые через JavaScript).
Изменение размеров шрифтов.

Как избежать layout shift?

Использовать явные размеры для изображений и медиа.
Избегать внезапного добавления большого количества контента без предзагрузки.
Использовать стили, которые минимизируют резкие изменения.

Пример layout shift:

Когда изображение загружается без указания ширины и высоты, другие элементы могут смещаться по мере его загрузки, что вызывает изменение макета страницы.

<!-- Плохая практика: изображение без указания размеров -->
<img src="example.jpg">

Как минимизировать влияние Reflow, Repaint и Layout Shift при анимациях?

1. Используйте transform и opacity для анимаций. Анимации на основе свойств transform (например, translate, scale, rotate) и opacity не вызывают reflow, поскольку они не влияют на размеры или положение элементов. Они лишь изменяют визуальное представление, что требует только repaint.

/* Плавная анимация перемещения без reflow */
#box {
  transition: transform 1s ease;
}

#box.move {
  transform: translateX(300px);
}

2. Избегайте изменения размеров и позиции элементов напрямую. Анимации, которые изменяют такие свойства, как width, height, margin или top, могут вызывать частые reflow, что замедляет работу страницы.

3. Используйте will-change.Если вы точно знаете, какие свойства элемента будут анимированы, используйте свойство CSS will-change. Это подсказывает браузеру заранее оптимизировать отрисовку для этих изменений. Однако стоит быть осторожным, так как избыточное использование will-change может негативно сказаться на производительности.

#box {
  will-change: transform;
}

4. Группируйте изменения в DOM. Если необходимо изменить несколько стилей или манипулировать DOM, старайтесь делать это в одном обновлении, чтобы избежать множества перерисовок или перерасчетов макета.

const box = document.getElementById('box');
box.style.width = '200px';
box.style.height = '200px';
// Изменения происходят за один reflow

Заключение

Когда вы создаете анимации или динамически изменяете элементы на веб-странице, важно учитывать влияние этих изменений на процессы reflow, repaint и layout shift. Оптимизация этих процессов помогает сделать анимации плавными и предотвратить задержки или «прыжки» интерфейса. Использование таких свойств, как transform и opacity, а также правильная работа с DOM помогают минимизировать нагрузку на браузер и улучшить производительность страницы.

Ссылка скопирована