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

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

CSS .selector { animation: regularAnimation 1s; } @media (prefers-reduced-motion: reduce) { .selector { animation: reducedAnimation .1s; } }

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

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

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

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

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

CSS .selector, .selector2, .selector3 { transition: transform 1s; } .selector:hover { transform: rotate(180deg); } .selector2:hover { transform: skew(5deg); } .selector3:hover { transform: transformY(-5%); }

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

CSS @media (prefers-reduced-motion: reduce) { .selector, .selector2, .selector3 { animation-duration: .05s; } }

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

CSS :root { –transition-duration: 1s; } .selector, .selector2, .selector3 { transition: transform var(–transition-duration); } @media (prefers-reduced-motion: reduce) { :root { –transition-duration: .05s; } }

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

CSS :root { –transition-duration1: 1s; –transition-duration2: 500ms; } .selector, .selector2, .selector3 { transition: transform var(–transition-duration1); } .selector, .selector2, .selector3 { transition: transform var(–transition-duration2); } @media (prefers-reduced-motion: reduce) { :root { –transition-duration1: .05s; –transition-duration2: .05s; } }

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

Автор: Silvestar Bistrović

Источник: webformyself.com