19.01.2022

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

Внедрение переменных CSS для сведения к минимуму анимации

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

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

CSS

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

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

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

CSS

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

CSS

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

CSS

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

CSS

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

По материалам webformyself.com

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *