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

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

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

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

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

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

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

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

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

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

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

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

Код выглядит намного чище, не так ли? Мне это нравится. И самое лучшее в этом то, что нам не нужно заботиться о том, сколько именно элементов имеют переходы, пока они используют переменную 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ć

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

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

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