CSS оголошує анімації властивостей макета

Чому це важливо

Посібник web.dev з оптимізації Cumulative Layout Shift застерігає від анімацій, що спричиняють зсуви макета, зокрема змін top і left. Він рекомендує анімації transform, які зміщують, масштабують, обертають чи скошують елемент, і зазначає, що композитні анімації зі зміщенням не враховуються в Cumulative Layout Shift.

Що зробити

Відкрийте знахідку: у ній показано таблицю стилів і для кожного правила, що збігається, — фрагмент селектора, рядок і анімовані властивості, а також назву @keyframes, якщо вона є.
Де ефект лише переміщує, змінює розмір чи робить елемент прозорим, анімуйте натомість transform (наприклад, translate чи scale) або opacity.
Перевірте в браузері, чи відповідає селектор видимому елементу і чи зсуває ефект навколишній вміст.

Коли залишити як є: Якщо селектор ніколи не відповідає видимому елементу або зміна макета задумана й ви її приймаєте, це можна залишити.

Що ми читаємо

Ми читаємо таблиці стилів, які перевірені сторінки підключають через <link rel="stylesheet">, використовуючи байти, збережені аудитом, — до 1 MiB на файл, і аналізуємо кожен файл один раз для обох перевірок CSS. Селектори не зіставляються, нічого не рендериться й не виконується.

Перехід враховується, коли transition чи transition-property правила називає top, left, width, height, box-shadow або фізичну чи логічну властивість margin, а його тривалість разом із затримкою більша за нуль; застосовуються останнє чинне оголошення й останній відповідний запис у списку. Нульова тривалість не приховує переходу з додатною затримкою. Відповідний запис all з додатним чи нерозв’язаним сумарним часом або нерозв’язаний вираз на кшталт var() чи inherit не можуть довести, що таблиця стилів чиста.

Анімація з ключовими кадрами враховується, коли animation чи animation-name правила посилається рівно на один блок @keyframes у тій самій таблиці стилів поза @media та подібними умовами, і цей блок задає одну з цих властивостей. Назву, визначену двічі, всередині умови чи лише в іншому файлі, перевірити не можна; про ключові кадри без посилань, що містять ці відстежувані властивості, не повідомляється, але вони не дають вважати таблицю стилів чистою. Нульова тривалість анімації не вважається виправленням.

Одна знахідка охоплює кожну таблицю стилів і перелічує всі правила, що збігаються; до неї входять перевірені сторінки, що підключають цю таблицю стилів. Якщо таблицю стилів не вдається завантажити чи прочитати повністю, її сторінки позначаються як неперевірені.

Приклад і докази

Ілюстративний приклад — схематичний CSS, а не реальний аудит.

Сторінка https://bakery.example/ підключає /assets/main.css, що містить таке правило:

.x {
  transition: width 1s;
}

Правило задає перехід для width, тому про таблицю стилів повідомляється для перегляду; чи використовує .x якийсь елемент, невідомо.

.x {
  transition: transform 1s;
}

Можливе виправлення: задайте натомість перехід для transform. Якщо новий аудит збереже лише початок таблиці стилів, чистий початок не підтверджує виправлення.

Підтвердити й перевірити знову

Перевірте самі: відкрийте таблицю стилів і пошукайте transition та @keyframes; панель Performance в інструментах розробника Chrome показує, чи справді ефект зсуває вміст.

Повторна перевірка: Повний аудит — запустіть новий повний аудит сайту. Знахідка вважається підтверджено виправленою, лише коли ту саму таблицю стилів прочитано повністю, кожну сторінку, що раніше її підключала, прочитано і вона досі її підключає, жоден перехід чи анімація з ключовими кадрами в ній не стосуються цих властивостей і нічого в ній не лишилося неперевіреним. Відсутня, обрізана чи непридатна до читання таблиця стилів або сторінка, яку більше не вдається прочитати, залишають знахідку непідтвердженою.

Обмеження та джерела

Це статичне прочитання коду CSS: ми не зіставляємо селекторів з елементами, не виконуємо анімацій і не вимірюємо зсуву макета, чутливості чи того, які ефекти браузер компонує окремим шаром, а перехід на transform сам по собі не доводить, що сторінка стала стабільнішою чи швидшою. Перевіряються лише перелічені властивості; таблиці стилів, підключені через @import, вбудовані блоки <style> і анімації, запущені JavaScript, не видно. Непідтримуваний синтаксис, непевне кодування й обмеження роботи також залишають охоплення неповним; таблиця стилів поза межами ресурсів, збережених аудитом, лишається неперевіреною.

Упевненість: Низька, бо оголошений перехід чи анімація можуть ніколи не застосовуватися до видимого елемента або ніколи не виконуватися; сам CSS не може показати їхнього ефекту.

Джерела

web.dev, Оптимізація Cumulative Layout Shift — зазначає, що зміни box-shadow спричиняють перекомпонування, перемальовування й композитинг, а зміни top і left — зсуви макета, радить не анімувати ці властивості й рекомендує анімації transform, зазначаючи, що композитні анімації зі зміщенням не враховуються в CLS. Перевірено 10 жовтня 2026.
W3C, Модуль CSS Transitions рівня 1 — визначає transition-property з початковим значенням all, а сумарну тривалість переходу — як невід’ємну тривалість плюс затримку; перехід починається, лише коли ця сумарна тривалість більша за нуль. Перевірено 10 жовтня 2026.
W3C, CSS Animations рівня 1 — визначає @keyframes і animation-name та зазначає, що назва, яка не відповідає жодному правилу @keyframes, нічого не анімує. Перевірено 10 жовтня 2026.

Редакційна перевірка: 15 жовтня 2026