Анимация на сайте: что это, виды и что проверить при приёмке

Коротко: анимация на сайте - движение на странице. MDN называет способы, которыми его делают: SVG, JavaScript (в том числе с <canvas> и WebGL), CSS-анимацию, видео, анимированные GIF и PNG. У видео и GIF главный вопрос - размер файла, у анимации в коде - нагрузка на процессор и рывки. Для несущественного движения, которое запускается само, идёт дольше пяти секунд и показано рядом с другим содержимым, критерий 2.2.2 стандарта WCAG 2.2 требует способ приостановить, остановить или скрыть его.

Ниже: какие способы называет MDN, для чего анимацию применяют, чем она обходится устройству, как отличить плавное движение от рывков, кому движение мешает и что про вспышки и паузу написано в стандарте WCAG. В конце таблица видов анимации с вопросами подрядчику, список решений до дизайна и проверки при приёмке.

Сведения приведены по страницам источников на 10.10.2026. Страницы MDN об анимации и приступах, страница Lighthouse и страницы W3C англоязычные: цитаты даны в оригинале, перевод наш. У страниц web.dev стоят даты обновления 2019-2023 годов, они указаны рядом с пересказом. Примеры вымышленные: интернет-магазин чая с сайтом example.ru.

Что называют анимацией на сайте?

Коротко: страница MDN об анимации перечисляет способы: SVG, JavaScript (включая <canvas> и WebGL), CSS-анимацию, <video>, анимированные GIF, анимированные PNG и другие типы изображений. Внутри CSS MDN различает переход между двумя состояниями (пример MDN - кнопка в покое и при наведении) и анимацию по набору ключевых кадров.

Страница MDN об анимации и частоте кадров начинается с перечня способов:

«Animation on the web can be done via SVG, JavaScript, including <canvas> and WebGL, CSS animation, <video>, animated GIFs and even animated PNGs and other image types.» Перевод наш: анимацию в вебе можно сделать через SVG, JavaScript, включая <canvas> и WebGL, CSS-анимацию, <video>, анимированные GIF и даже анимированные PNG и другие типы изображений.

• Animation performance and frame rate - Performance | MDN, страница изменена 7 ноября 2025 года

Список делится на две группы, и так его делит сама страница. Видео и анимированные изображения - файлы, которые скачивает браузер. CSS, SVG, canvas, WebGL и остальной JavaScript - анимация, которую выполняет код (на странице она названа code based animations). На главной странице BITSPARK слово WebGL стоит в описании услуги «Интерактивный сайт»; что такое WebGL, эта статья не объясняет.

Внутри CSS страница CSS and JavaScript animation performance - Performance | MDN различает два понятия. Переход (CSS transition) - это движение между текущим стилем и конечным состоянием, пример страницы: «a resting button state and a hover state» (перевод наш: состояние кнопки в покое и состояние при наведении курсора). Анимация (CSS animation) - движение между набором начальных значений и набором конечных, с возможными промежуточными точками.

Русская страница MDN формулирует так:

«CSS-анимации позволяют анимировать переходы от одной конфигурации CSS стилей к другой. CSS-анимации состоят из двух компонентов: стилевое описание анимации и набор ключевых кадров, определяющих начальное, конечное и, возможно, промежуточное состояние анимируемых стилей.»

• Использование CSS-анимации - CSS: каскадные таблицы стилей | MDN, страница изменена 14 декабря 2025 года

Параллакс и появление блоков при прокрутке страницы MDN, на которые опирается эта статья, не определяют. Страница о настройке prefers-reduced-motion (обновлена 2019-03-11) объясняет, откуда у параллакса берутся неприятные реакции: «background elements move at a different rate than foreground elements». Перевод наш: фоновые элементы движутся с другой скоростью, чем элементы переднего плана. Из этой фразы видна и суть эффекта. Появление блоков при прокрутке та же страница показывает в демонстрации: при прокрутке каждая картинка по очереди выезжает справа или слева. В тексте такие эффекты названы reveal animations (перевод наш: анимации появления).

Для чего анимацию применяют и когда она только украшает?

Коротко: страница web.dev от 2019-03-11 называет три применения анимации: обратная связь на действие, ощущение скорости и декоративные эффекты. Для первых двух у движения есть задача. Про декоративные эффекты страница пишет, что некоторым пользователям они не нравятся: те чувствуют себя отвлечёнными или замедленными. Вопрос к каждому движущемуся элементу макета: зачем он движется.

Те же три применения описывает страница prefers-reduced-motion: Sometimes less movement is more | Articles | web.dev.

• Обратная связь. Анимацию используют, чтобы сообщить пользователю: действие принято и обрабатывается. Пример страницы: в интернет-магазине товар как будто летит в корзину, значок которой стоит в правом верхнем углу.
• Ощущение скорости. Страница описывает движение как способ повлиять на восприятие: скелетные экраны, контекстные данные и превью картинок низкого качества занимают время пользователя, и весь опыт кажется быстрее.
• Декоративные эффекты. Примеры страницы: анимированные градиенты, параллакс при прокрутке, фоновое видео. Там же страница пишет, что для пользователей, которых анимация укачивает, уменьшение анимации - «a medical necessity» (перевод наш: медицинская необходимость); об этом ниже, в разделе о том, кому движение мешает.

MDN добавляет, что анимация работает в обе стороны. Страница об анимации и частоте кадров пишет:

«Animation can help make a site feel faster and responsive, but animations can also make a site feel slower and janky if not done correctly.» Перевод наш: анимация может помочь сайту казаться быстрее и отзывчивее, но при неправильном исполнении может сделать так, что сайт покажется медленнее и будет идти рывками.

• Animation performance and frame rate - Performance | MDN

Страница Cumulative Layout Shift (CLS) | Articles | web.dev (обновлена 2023-04-12) в разделе об анимациях и переходах пишет, что содержимое, которое перемещается постепенно и естественно, может помочь пользователю понять происходящее и провести его между состояниями. Условие стоит в начале раздела: «Animations and transitions, when done well». Перевод наш: анимации и переходы, если они сделаны хорошо.

Как отличить движение с задачей от украшения, подсказывает курс по доступности (страница обновлена 2022-09-30). Он предлагает спросить, существенно ли движение элемента для понимания содержимого или действий на экране:

«If it's not essential, consider removing all movement (...) from the element you are building or designing.» Перевод наш: если оно не существенно, рассмотрите удаление всего движения (...) из элемента, который вы создаёте или проектируете.

• Animation and motion | web.dev

В пропущенной части страница уточняет, что убрать стоит и микродвижения. Вопрос о существенности движения можно задать про каждый движущийся элемент макета, а автосмена слайдов как частный случай движения разобрана в статье о слайдере, там же приведён перевод критерия WCAG 2.2.2.

Какие затраты бывают у анимации: файл или нагрузка на устройство?

Коротко: MDN различает два вида затрат. У видео и анимированных GIF главный вопрос - размер файла. Анимация в коде (CSS, SVG, canvas, WebGL, JavaScript) может нагрузить процессор и дать рывки, даже если объём передаваемых данных мал. Какой вид затрат у конкретного эффекта, зависит от способа, поэтому первый вопрос подрядчику - чем сделано движение.

Вступление той же страницы MDN разделяет затраты прямо:

«For animated media, such as video and animated GIFs, the main performance concern is file size - downloading the file fast enough to not negatively impact performance is the greatest issue. Code based animations, be it CSS, SVG, <canvas>, WebGL or other JavaScript animations, can cause performance issues even if the bandwidth footprint is small. These animations can consume CPU and/or cause jank.» Перевод наш: для анимированных медиа, таких как видео и анимированные GIF, главная забота - размер файла: самая большая проблема в том, чтобы скачать файл достаточно быстро и не навредить производительности. Анимация в коде - будь то CSS, SVG, <canvas>, WebGL или другой JavaScript - может вызвать проблемы с производительностью, даже если объём передаваемых данных мал. Такие анимации могут занимать процессор и (или) вызывать рывки (jank).

• Animation performance and frame rate - Performance | MDN

Для example.ru это значит два разных вопроса. Фоновое видео на главной странице example.ru - файл: спросите его размер и формат. Если карточки чая появляются при прокрутке, первый вопрос - чем сделан эффект: от этого зависит, какой вид затрат ждать. Какие форматы у анимированных изображений называет MDN, показано в таблице статьи о форматах изображений.

MDN называет условия, при которых анимация вредит производительности: файл не успевает скачаться, код нагружает процессор, анимируются дорогие CSS-свойства.

Почему одна анимация идёт плавно, а другая рывками?

Коротко: страницы MDN и web.dev называют 60 кадров в секунду общепринятой целью («commonly accepted» и «widely accepted»); это общепринятая оценка, стандартом она в источниках не названа. На один кадр при этом приходится 16,7 мс. По web.dev браузер дёшево анимирует два CSS-свойства, transform и opacity; для остальных, по словам страницы, выйти на плавные 60 кадров скорее всего не получится.

Сначала единицы. Кадр определяет страница Why are some animations slow? | Articles | web.dev (обновлена 2020-10-06):

«On the web a frame is the time that it takes to do all of the work required to update and repaint the screen.» Перевод наш: в вебе кадр - это время, которое нужно, чтобы выполнить всю работу по обновлению и перерисовке экрана.

Если кадр не укладывается в 16,7 мс (1000 мс / 60 ≈ 16,7), пользователи, по словам страницы, замечают задержку. MDN тот же расчёт даёт так: при 60 кадрах в секунду у браузера есть 16,7 миллисекунды, чтобы выполнить скрипты, пересчитать стили и размещение и перерисовать обновляемую область.

Чтобы показать что-то на странице, браузер проходит четыре последовательных шага. Страница называет их rendering pipeline (перевод наш: конвейер отрисовки): Style - расчёт применяемых стилей, Layout - положение и размеры каждого элемента, Paint - заливка пикселей, Composite - разбивка на слои и вывод слоёв на экран. Когда анимируется уже загруженная страница, шаги выполняются заново, начиная с того, который нужно изменить. Если анимация меняет размещение, закраска и сборка слоёв тоже выполняются заново.

От этого зависит цена анимации. Страница начинается с вывода:

«Modern browsers can animate two CSS properties cheaply: transform and opacity. If you animate anything else, the chances are you're not going to hit a silky smooth 60 frames per second (FPS).» Перевод наш: современные браузеры могут дёшево анимировать два CSS-свойства: transform и opacity. Если вы анимируете что-либо ещё, скорее всего вы не выйдете на плавные 60 кадров в секунду.

• Why are some animations slow? | Articles | web.dev, обновлена 2020-10-06

Руководство How to create high-performance CSS animations | Articles | web.dev (обновлено 2020-10-06) сопоставляет свойства с действиями: для перемещения, поворота и изменения размера нужен transform, для показа и скрытия - opacity. MDN в разделе «CSS property cost» делит свойства на три группы:

Цифры в руководстве есть, но это числа одного примера. В руководстве сравниваются два примера: в одном блок двигается через top и left, в другом через transform. Счётчик кадров в Chrome DevTools показал 50% потерянных кадров у первого и 1% у второго. Это пример страницы, и общей закономерностью эти проценты не являются.

Слои тоже стоят ресурсов. Страница «Why are some animations slow?» пишет: каждый слой использует память, а на устройствах с ограниченной памятью создание новых слоёв может создать проблему больше той, которую вы решаете. Есть ли такая проблема у вашей страницы, покажет проверка движения на разных устройствах (вывод автора).

И последнее для разговора с подрядчиком. Вопрос о том, что лучше, CSS или JavaScript, страница называет лишённым смысла, если анимация вызывает layout или paint. Накладные расходы на размещение или перерисовку, по её словам, скорее всего перекроют любую работу самого CSS или JavaScript, поэтому спрашивать стоит, какие свойства меняет анимация.

Что показывает аудит Lighthouse «Avoid non-composited animations»?

Коротко: Lighthouse - инструмент аудита страниц. Его аудит «Avoid non-composited animations» перечисляет элементы страницы с анимациями, которые не обработаны на этапе композиции, и причины. По странице Chrome for Developers (обновлена 2024-12-08) такие анимации могут идти рывками на слабых телефонах и увеличивать CLS - показатель сдвигов макета.

Страница Avoid non-composited animations | Lighthouse | Chrome for Developers определяет предмет через те же четыре шага: non-composited animation (перевод наш: нескомпонованная анимация) - это любая анимация, которая запускает один из более ранних шагов конвейера (Style, Layout или Paint). Ей нужно больше работы, поэтому, как сказано на странице, она может выглядеть рывками на слабых телефонах и при тяжёлых задачах в основном потоке браузера.

Вторая связь - со сдвигом макета. CLS (Cumulative Layout Shift) - показатель, который, по странице web.dev о CLS, помогает измерить неожиданные сдвиги макета, с которыми сталкиваются пользователи. Страница Lighthouse пишет:

«Non-composited animations can also increase the Cumulative Layout Shift (CLS) of your page since they result in actual movement of elements that the CLS algorithm measures, which may cause knock on shifts to other elements. Composited animations won't result in other elements shifting and so are excluded from CLS.» Перевод наш: нескомпонованные анимации могут также увеличить CLS страницы, потому что в результате элементы реально смещаются, а алгоритм CLS измеряет именно это, и это может вызвать сдвиги других элементов. Скомпонованные анимации не приводят к сдвигу других элементов и потому исключены из CLS.

• Avoid non-composited animations | Lighthouse | Chrome for Developers, обновлена 2024-12-08

Раздел об анимациях на странице о CLS подтверждает это со стороны разработки: свойство transform позволяет анимировать элементы без сдвигов макета.

Как Lighthouse находит такие анимации, страница объясняет так: Chrome записывает причины отказа в трассировку DevTools, которую читает Lighthouse, а Lighthouse перечисляет узлы DOM (элементы страницы) с нескомпонованными анимациями и причину для каждой. Для заказчика это конкретный артефакт. Можно попросить подрядчика приложить результат этого аудита и объяснить каждую строку списка.

Кому движение на странице мешает?

Коротко: страницы web.dev (2019-03-11 и 2022-09-30), MDN (страница изменена 17 сентября 2026 года) и W3C называют три группы реакций: головокружение и тошноту при вестибулярных нарушениях, отвлечение внимания и приступы при светочувствительной эпилепсии. Медицинских выводов в статье нет: ниже пересказаны источники и сформулированы вопросы заказчика.

Вестибулярные реакции. Страница о prefers-reduced-motion (обновлена 2019-03-11) пишет, что анимации прокрутки могут вызывать вестибулярные нарушения, когда сильно двигаются элементы, кроме главного элемента, связанного с прокруткой. О параллаксе сказано отдельно: он может вызывать такие нарушения, потому что фон движется с другой скоростью, чем передний план. Реакции страница называет так: «Vestibular (inner ear) disorder reactions include dizziness, nausea, and migraine headaches (...)». Перевод наш: реакции при нарушениях вестибулярного аппарата (внутреннего уха) включают головокружение, тошноту и мигрень.

Отвлечение внимания. Курс по доступности (обновлён 2022-09-30) пишет, что люди находят движущееся, мигающее или прокручивающееся содержимое отвлекающим, а людям с СДВГ и другими нарушениями внимания анимированные элементы могут мешать настолько, что они забывают, зачем пришли на сайт.

Вспышки. Страница Web accessibility for seizures and physical reactions - Accessibility | MDN пишет, что содержимое, которое мерцает, вспыхивает или мигает, может вызвать приступ светочувствительной эпилепсии. Среди технологий, которые способны дать такое содержимое, она называет видео, анимированные GIF, анимированные PNG, анимированные SVG, Canvas, CSS-анимации и JavaScript-анимации. Пояснение Understanding Success Criterion 2.3.1: Three Flashes or Below Threshold | WAI | W3C говорит, что у людей с фоточувствительными приступами приступ может вызвать содержимое, которое вспыхивает с определёнными частотами дольше нескольких вспышек. О параллаксе на странице MDN одна строка:

«Parallax effects can cause disorientation. Use parallax effects with caution; if you must use them, ensure the user has a control to turn them off.» Перевод наш: параллакс-эффекты могут вызывать дезориентацию. Применяйте их с осторожностью; если без них не обойтись, убедитесь, что у пользователя есть способ их отключить.

• Web accessibility for seizures and physical reactions - Accessibility | MDN, страница изменена 17 сентября 2026 года

Курс приводит и цифры: к 40 годам более 35% взрослых, по странице, будут иметь опыт той или иной формы вестибулярной дисфункции, а светочувствительность, по оценке страницы, есть у 3% людей с эпилепсией. Это данные, на которые ссылается страница от 2022-09-30; они приведены как её слова.

Что такое настройка «Уменьшить движение» и что с ней делает сайт?

Коротко: в системах есть настройка, которой пользователь просит уменьшить движение. MDN описывает медиафункцию prefers-reduced-motion, по которой сайт узнаёт о ней; MDN ставит ей отметку Baseline Widely available и пишет, что функция доступна в браузерах с января 2020 года. Что сайт сделает, когда узнает о настройке, решают дизайн и разработка. Это пункт задания и пункт приёмки.

Русская страница MDN определяет медиафункцию так:

«CSS медиа функция prefers-reduced-motion может использоваться для определения того, запросил ли пользователь, чтобы ОС минимизировала количество анимации или движения, которые она использует.»

• prefers-reduced-motion - CSS: каскадные таблицы стилей | MDN, страница изменена 14 декабря 2025 года

У функции два значения. Значение no-preference MDN описывает так: пользователь не сделал предпочтений, известных системе. Значение reduce: «Указывает, что пользователь уведомил ОС, что он предпочитает интерфейс, который минимизирует количество движения или анимации, предпочтительно до точки, где удаляются все несущественные движения.» В примере MDN про настройку сказано: «Уменьшить движение» в настройках доступности.

Где настройка находится в системе, написано в том же курсе по доступности (страница обновлена 2022-09-30). Названия приведены так, как они записаны на этой странице, на дату её обновления.

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

Что сайт может сделать, когда узнал о настройке, страница 2019-03-11 описывает диапазоном: от отказа от автозапуска видео и отключения чисто декоративных эффектов до полной переработки страницы для таких пользователей. В демонстрации на странице при включённой настройке несущественные анимации появления (reveal animations) пропадают, остаётся только само движение прокрутки. Та же страница оговаривает: «Not every site will use prefers-reduced-motion, or maybe not significantly enough for your taste.» Перевод наш: не каждый сайт использует prefers-reduced-motion или использует её достаточно значительно, на ваш вкус. Поэтому пункт про настройку нужен и в задании, и в приёмке (вывод автора).

Курс (2022-09-30) советует также дать пользователю выбор на самом сайте: добавить переключатель, который включает и выключает анимацию, и рассмотреть вариант, когда анимация по умолчанию выключена.

Что говорят о вспышках и паузе для движения W3C и курс по доступности?

Коротко: из текста WCAG 2.2 (рекомендация W3C от 12 декабря 2024 года) статья берёт три критерия: 2.2.2 о паузе для движущегося содержимого, 2.3.1 о вспышках и 2.3.3 об анимации от взаимодействия. Критерий 2.2.2 уже приведён в переводе в статье о слайдере. Здесь даны два других и различие между 2.2.2 и 2.3.3. Подпадает ли конкретная анимация под критерий, решает проверка по тексту критерия.

WCAG (Web Content Accessibility Guidelines) - рекомендации W3C по доступности веб-содержимого. Критерии приведены по странице Web Content Accessibility Guidelines (WCAG) 2.2, на ней стоит отметка W3C Recommendation 12 December 2024. Уровни A и AAA в таблице - как они помечены в тексте. Обязателен ли WCAG для сайта конкретной компании, в статье не рассматривается.

Критерий 2.2.2 курс пересказывает так (страница обновлена 2022-09-30): нужно предусмотреть способ приостановить, остановить или скрыть несущественное движущееся, мигающее или прокручивающееся содержимое, которое запускается само, идёт дольше пяти секунд и является частью других элементов страницы. Перевод критерия и исключение для существенного движения - в статье о слайдере. Откуда взято число пять секунд, объясняет страница Understanding SC 2.2.2:

«Five seconds was chosen because it is long enough to get a user's attention, but not so long that a user cannot wait out the distraction if necessary to use the page.» Перевод наш: пять секунд выбраны потому, что этого достаточно, чтобы привлечь внимание пользователя, но не так много, чтобы он не мог дождаться конца отвлекающего движения, если это нужно для работы со страницей.

• Understanding Success Criterion 2.2.2: Pause, Stop, Hide | WAI | W3C

О вспышках в тексте стандарта сказано:

«Web pages do not contain anything that flashes more than three times in any one second period, or the flash is below the general flash and red flash thresholds.» Перевод наш: веб-страницы не содержат ничего, что вспыхивает чаще трёх раз в течение любой одной секунды, либо вспышка ниже порогов общей вспышки и красной вспышки.

• Web Content Accessibility Guidelines (WCAG) 2.2, критерий 2.3.1 Three Flashes or Below Threshold (Level A)

Пороги общей и красной вспышки заданы определениями в тексте стандарта. Для заказчика практический вопрос один: есть ли на странице мигание и проверял ли его подрядчик. Курс (2022-09-30) называет бесплатный инструмент PEAT (Photosensitive Epilepsy Analysis Tool) и пишет, что содержимое со вспышками или быстрой сменой светлого и тёмного фона стоит оценивать с его помощью.

Третий критерий относится к движению, которое запускает сам пользователь:

«Motion animation triggered by interaction can be disabled, unless the animation is essential to the functionality or the information being conveyed.» Перевод наш: анимацию движения, вызванную взаимодействием, можно отключить, если она не существенна для функциональности или передаваемой информации.

• Web Content Accessibility Guidelines (WCAG) 2.2, критерий 2.3.3 Animation from Interactions (Level AAA)

Страница Understanding Success Criterion 2.3.3: Animation from Interactions | WAI | W3C проводит границу: «Animation from interactions» относится к анимации, которую запустило действие пользователя, а критерий 2.2.2 - к анимации, которую страница запускает сама, без осознанного действия пользователя. Для одной и той же анимации могут не выполняться оба критерия. Страница называет три способа снизить риск вестибулярных реакций, достаточно выбрать любой: не использовать лишнюю анимацию, дать пользователю способ отключить несущественную анимацию от взаимодействия либо воспользоваться функцией уменьшения движения в браузере или системе. Там же определено, что считать анимацией движения: добавление промежуточных шагов между состояниями для иллюзии движения. Определение исключает изменения цвета и прозрачности, которые не меняют воспринимаемый размер, форму или положение элемента.

Какие виды анимации бывают и что спросить у подрядчика?

Коротко: таблица ниже связывает то, что вы видите на макете, со способом по спискам MDN, вопросом подрядчику и проверкой, которую можно сделать самому. Когда источники не привязывают эффект к одному способу, в столбце о способе это сказано прямо, и первый вопрос подрядчику - чем сделан эффект.

Таблица - перечень для разговора: каждая ячейка опирается на раздел выше. Столбец о способе пересказывает источники; способы в ней не сравниваются и не рекомендуются.

Что решить до дизайна и записать в задание?

Коротко: до дизайна стоит записать для каждого движущегося элемента ответы на шесть вопросов. Зачем он движется? Чем сделан? Какие свойства меняет? Что покажет аудит Lighthouse? Что будет при настройке «Уменьшить движение»? Есть ли пауза у движения дольше пяти секунд и есть ли мигание? Каждый вопрос опирается на раздел статьи.

На главной странице BITSPARK движение названо в описании студии: «Движение, типографика и код работают вместе с содержанием.» Шаг «Дизайн» описан так: «Формируем характер проекта: типографику, композицию, движение и систему интерфейса.»

Для услуги «Интерактивный сайт» на главной стоит «Индивидуальная оценка - WebGL, motion и нестандартные интерфейсы.» Слово «движение» на главной стоит в описании шага «Дизайн», поэтому решения о движении лучше записать до макета.

1. Зачем движется каждый элемент? Опора: страница 2019-03-11 называет три применения - обратная связь, ощущение скорости, декор; курс по доступности (2022-09-30) предлагает спросить, существенно ли движение для понимания содержимого.
2. Чем сделано движение? Опора: список способов MDN и разделение затрат на размер файла и нагрузку на устройство.
3. Какие свойства меняет анимация в коде? Опора: MDN и страница об анимациях о стоимости свойств; transform и opacity названы дешёвыми.
4. Что покажет аудит Lighthouse «Avoid non-composited animations» для главной и страницы каталога? Опора: страница Chrome for Developers.
5. Что делает сайт при включённой настройке «Уменьшить движение»? Опора: MDN о prefers-reduced-motion, курс по доступности, критерий 2.3.3.
6. Есть ли движение, которое идёт само дольше пяти секунд, и как его остановить? Есть ли мигание и кто его проверял? Опора: критерии 2.2.2 и 2.3.1.

Для example.ru, интернет-магазина чая, запись в задании по движению могла бы выглядеть так:

Движение на example.ru
Д-1. Для каждого движущегося элемента макета записано, зачем он движется: обратная связь на действие, ощущение скорости или оформление.
Д-2. Для каждого элемента записано, чем сделано движение: CSS, SVG, JavaScript, видео или анимированное изображение.
Д-3. Для видео и анимированных изображений указан размер файла.
Д-4. Для анимации в коде указаны свойства, которые она меняет. К сдаче приложен результат аудита Lighthouse «Avoid non-composited animations» для главной страницы и страницы каталога.
Д-5. Движение, которое запускается само и идёт дольше пяти секунд рядом с другим содержимым, можно приостановить, остановить или скрыть, если оно не существенно для работы страницы.
Д-6. На странице нет вспышек чаще трёх раз в секунду, либо подрядчик указал, чем подтверждено, что вспышки ниже порогов стандарта.
Д-7. При включённой настройке системы «Уменьшить движение» несущественные анимации не воспроизводятся.
Д-8. Параллакс и другие эффекты при прокрутке можно отключить.

Пункты Д-1-Д-8 в источниках не стоят: это вывод автора на основе разделов выше. Как записывать требования так, чтобы по ним можно было принимать работу, показано в статье о техническом задании на сайт.

Если движение связано с окном, которое появляется поверх страницы, способы закрытия и работа с клавиатурой разобраны в статье о всплывающем окне; о движении при появлении окна в ней не сказано.

Что проверить при приёмке на телефоне и на компьютере?

Коротко: восемь проверок: список движущихся элементов, плавность, аудит Lighthouse, пауза для движения дольше пяти секунд, мигание, настройка «Уменьшить движение», отключение параллакса, размер файлов. Каждая опирается на раздел статьи. Это перечень для разговора с подрядчиком; как править анимацию в коде, здесь не описано.

1. Пройдите главную и основные страницы на телефоне и на компьютере и выпишите все движущиеся элементы. Сверьте список с записью Д-1 и Д-2. Как проверять страницы на экране телефона, описано в статье об адаптивном сайте.
2. Посмотрите, как идёт каждое движение: плавно или рывками. MDN называет рывки jank, а 60 кадров в секунду общепринятой оценкой плавности. Страница Lighthouse называет слабые телефоны тем местом, где анимации без композиции могут идти рывками, поэтому проверка только на новом телефоне может проблему не показать (вывод автора). Как выбрать устройства и браузеры, описано в статье о кроссбраузерности.
3. Попросите приложить результат аудита Lighthouse «Avoid non-composited animations». Страница пишет, что аудит перечисляет узлы с такими анимациями и причины.
4. Подождите на странице. Если что-то движется само дольше пяти секунд рядом с другим содержимым, найдите способ приостановить, остановить или скрыть его (критерий 2.2.2). Исключение для существенного движения приведено в статье о слайдере.
5. Посмотрите, нет ли быстрого мигания и быстрой смены светлого и тёмного. Если есть, спросите подрядчика, чем проверено содержимое. Курс для таких случаев называет инструмент PEAT, критерий 2.3.1 говорит о трёх вспышках в секунду.
6. Включите настройку «Уменьшить движение» на своём устройстве (в macOS это Reduce motion, в Android - Remove animations; в Windows движение уменьшают, выключив Show animations; названия по странице web.dev от 2022-09-30) и пройдите страницы снова. MDN описывает цель значения reduce: предпочтительно удалить все несущественные движения. Исчезло ли несущественное движение, видно при прохождении страниц.
7. Найдите способ отключить параллакс и другие эффекты при прокрутке. MDN просит дать пользователю такой способ, если без параллакса не обойтись.
8. Спросите размер и формат видео и анимированных изображений. MDN называет размер файла главной заботой для таких файлов.

На главной странице BITSPARK шаг «Запуск» описан так: «Проверяем desktop и mobile, скорость, формы и ключевые сценарии - затем запускаем.»

Источники

Страницы открыты 10.10.2026. Даты обновления указаны так, как они стоят на самих страницах.

• Animation performance and frame rate - Performance | MDN - способы анимации в вебе, два вида затрат, 60 кадров в секунду и 16,7 мс, три группы CSS-свойств (на английском, страница изменена 7 ноября 2025 года).
• CSS and JavaScript animation performance - Performance | MDN - переход и анимация в CSS (на английском, страница изменена 7 ноября 2025 года).
• Использование CSS-анимации - CSS: каскадные таблицы стилей | MDN - определение CSS-анимации (страница изменена 14 декабря 2025 года).
• prefers-reduced-motion - CSS: каскадные таблицы стилей | MDN - определение медиафункции, значения, отметка Baseline (страница изменена 14 декабря 2025 года).
• Web accessibility for seizures and physical reactions - Accessibility | MDN - технологии, способные дать мигающее содержимое, параллакс (на английском, страница изменена 17 сентября 2026 года).
• Why are some animations slow? | Articles | web.dev - кадр, четыре шага отрисовки, transform и opacity, слои и память (обновлена 2020-10-06).
• How to create high-performance CSS animations | Articles | web.dev - свойства для перемещения, изменения размера и показа, пример 50% и 1% потерянных кадров (обновлено 2020-10-06).
• prefers-reduced-motion: Sometimes less movement is more | Articles | web.dev - применения анимации, вестибулярные реакции, демонстрация (обновлена 2019-03-11).
• Animation and motion | web.dev - вопрос о существенности движения, пересказ о паузе, настройки в системах, переключатель на сайте (обновлена 2022-09-30).
• Cumulative Layout Shift (CLS) | Articles | web.dev - раздел об анимациях и переходах (обновлена 2023-04-12).
• Avoid non-composited animations | Lighthouse | Chrome for Developers - аудит, рывки на слабых телефонах, связь с CLS (обновлена 2024-12-08).
• Web Content Accessibility Guidelines (WCAG) 2.2 - критерии 2.2.2, 2.3.1, 2.3.3 (рекомендация W3C, 12 December 2024).
• Understanding Success Criterion 2.2.2: Pause, Stop, Hide | WAI | W3C - пояснение к критерию, почему пять секунд.
• Understanding Success Criterion 2.3.1: Three Flashes or Below Threshold | WAI | W3C - пояснение к критерию о вспышках.
• Understanding Success Criterion 2.3.3: Animation from Interactions | WAI | W3C - различие с 2.2.2, способы снизить риск, определение анимации движения.
• BITSPARK - Digital studio - услуги студии, описание, шаги «Дизайн» и «Запуск».

Обсудить проект в Telegram: t.me/billioniks