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

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

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

123456789

.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%); }

1234567891011121314151617

.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; } }

1234567

@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; } }

123456789101112131415

: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; } }

1234567891011121314151617181920212223

: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