Использование переменных CSS для сведения к минимуму анимации

Использование переменных CSS для сведения к минимуму анимации

От автора: вы знаете о медиа-функции CSS prefers-reduced-motion? В двух словах, prefers-reduced-motion это параметр, который сообщает нам, установил ли пользователь системы удаление или минимизацию анимации и переходов.

Вот пример использования:

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Итак, как нам помогают переменные CSS? Чтобы ответить на этот вопрос, я хотел бы показать вам «обычный» способ минимизировать анимацию в CSS. Допустим, у нас есть три элемента и три разных перехода при наведении курсора с одинаковой продолжительностью перехода.

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

Чтобы уменьшить время анимации перехода, мы могли бы написать следующее:

В таком подходе нет ничего плохого, но представьте, насколько велико влияние этого правила для медиа-функции prefers-reduced-motion для всех элементов с переходами. Давайте представим переменную CSS, которая может помочь уменьшить анимацию в глобальном масштабе.

Код выглядит намного чище, не так ли? Мне это нравится. И самое лучшее в этом то, что нам не нужно заботиться о том, сколько именно элементов имеют переходы, пока они используют переменную CSS. Мы могли бы использовать несколько длительностей перехода, и код все равно будет выглядеть чистым:

Мне нравится использовать переменные CSS, и теперь, когда они широко поддерживаются во всех современных браузерах, у вас нет причин не использовать prefers-reduced-motion.

Автор: Silvestar Bistrović

Источник: www.silvestar.codes

Редакция: Команда webformyself.

Читайте нас в Telegram, VK, Яндекс.Дзен

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Верстка-Мастер. Полное руководство

Овладейте современной адаптивной версткой с нуля

Подробнее

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментирование закрыто.