Уменьшенное движение и производительность — Примеры

Пример 1 — Панель, которая анимируется для всех

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

.drawer {
  transform: translateX(100%);
  transition: transform 160ms ease-out;
}

.drawer.is-open { transform: translateX(0); }

Решение

@media (prefers-reduced-motion: no-preference) {
  .drawer {
    transform: translateX(100%);
    transition: transform 160ms ease-out;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

Для читателя, включившего уменьшенное движение, панель теперь появляется и исчезает сразу, без выезда: панель на месте, её по-прежнему можно закрыть, и ничто в сценарии не зависит от завершения анимации. Это важно, потому что движение может вызывать тошноту, головокружение и мигрень у людей с вестибулярными расстройствами, так что настройка — не вопрос вкуса. Если обернуть необязательное движение в запрос no-preference, неподвижный интерфейс станет умолчанием, а общее правило под ним будет страховкой для сторонних виджетов, а не заменой решению о том, что должно двигаться. Изменения цвета и прозрачности остаются: они всё ещё говорят, что что-то появилось.

Пример 2 — Анимация, которая анимирует раскладку

Раскрывающаяся строка анимирует свою высоту и margin на каждом кадре, и на телефоне среднего класса она заикается. Скажите, какие свойства браузер вынужден пересчитывать, и получите то же движение без них.

.row {
  height: 0;
  margin-top: 0;
  transition: height 200ms ease-out, margin-top 200ms ease-out;
}

.row.is-open { height: 2.5rem; margin-top: 0.5rem; }

Решение

.row {
  transform: scaleY(0);
  opacity: 0;
  transform-origin: top;
  transition: transform 200ms ease-out, opacity 200ms ease-out;
}

.row.is-open { transform: scaleY(1); opacity: 1; }

height и margin — свойства раскладки, поэтому каждый кадр вынуждает браузер пересчитывать позиции элемента и всего, что идёт после него, а анимация конкурирует за примерно шестнадцать миллисекунд, которые даёт кадр, — вот почему на машине, где её писали, она выглядит плавной, а на более медленном железе заикается. transform и opacity можно скомпоновать без прохода раскладки и перерисовки, поэтому работа уходит с главного потока и занятая страница её не останавливает. Визуальный результат тот же, и именно зажатие CPU во время просмотра записи доказывает, что работы раскладки не осталось, а не просто стало меньше.