От автора: вы знаете о медиа-функции CSS prefers-reduced-motion? В двух словах, prefers-reduced-motion это параметр, который сообщает нам, установил ли пользователь системы удаление или минимизацию анимации и переходов.
Вот пример использования:
|
1 2 3 4 5 6 7 8 9 |
.selector { animation: regularAnimation 1s; } @media (prefers-reduced-motion: reduce) { .selector { animation: reducedAnimation .1s; } } |
Выполнение функции уменьшения анимации не обязательно означает полное ее удаление. Анимация может быть уменьшена или ускорена, в зависимости от того, что будет комфортно для пользователя, но это выходит за рамки данной статьи.
Итак, как нам помогают переменные CSS? Чтобы ответить на этот вопрос, я хотел бы показать вам «обычный» способ минимизировать анимацию в CSS. Допустим, у нас есть три элемента и три разных перехода при наведении курсора с одинаковой продолжительностью перехода.
Напоминаем, что следует анимировать только непрозрачность и преобразование, чтобы избежать повторных вычислений рисования и макета.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.selector, .selector2, .selector3 { transition: transform 1s; } .selector:hover { transform: rotate(180deg); } .selector2:hover { transform: skew(5deg); } .selector3:hover { transform: transformY(-5%); } |
Чтобы уменьшить время анимации перехода, мы могли бы написать следующее:
|
1 2 3 4 5 6 7 |
@media (prefers-reduced-motion: reduce) { .selector, .selector2, .selector3 { animation-duration: .05s; } } |
В таком подходе нет ничего плохого, но представьте, насколько велико влияние этого правила для медиа-функции prefers-reduced-motion для всех элементов с переходами. Давайте представим переменную CSS, которая может помочь уменьшить анимацию в глобальном масштабе.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
:root { --transition-duration: 1s; } .selector, .selector2, .selector3 { transition: transform var(--transition-duration); } @media (prefers-reduced-motion: reduce) { :root { --transition-duration: .05s; } } |
Код выглядит намного чище, не так ли? Мне это нравится. И самое лучшее в этом то, что нам не нужно заботиться о том, сколько именно элементов имеют переходы, пока они используют переменную CSS. Мы могли бы использовать несколько длительностей перехода, и код все равно будет выглядеть чистым:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
: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ć
Источник: www.silvestar.codes
Редакция: Команда webformyself.
Читайте нас в Telegram, VK, Яндекс.Дзен
