en
/login
Koval SEO

CSS declares animations of layout properties

In the reportCSS animation of layout properties

css_layout_property_animation · Review item

Short answer

This appears when a linked stylesheet transitions or animates top, left, width, height, box-shadow or a margin property. Some of these properties change layout or require repainting; moving nearby content can shift the page, while transform and opacity usually avoid layout work. It is a static reading of the CSS: we cannot tell whether an element on the page uses the rule or whether the effect ever runs.

Severity: Notice. A review item at notice level, because the CSS alone cannot show that the effect runs on a visible element.

Why it matters

web.dev's guide to optimising Cumulative Layout Shift warns against animations that cause layout shifts, including changes to top and left. It recommends transform animations that translate, scale, rotate or skew, and notes that composited animations using translate do not count toward Cumulative Layout Shift.

What to do

  1. Open the finding: it shows the stylesheet and, for each matching rule, its selector excerpt, line, and the animated properties, with the @keyframes name when there is one.
  2. Where an effect only moves, resizes or fades an element, animate transform (for example translate or scale) or opacity instead.
  3. Check in a browser whether the selector matches a visible element and whether the effect moves surrounding content.

When to leave it as it is: If the selector never matches a visible element, or the layout change is intended and you accept it, you can leave it.

What we read

We read the stylesheets that audited pages link with <link rel="stylesheet">, using the bytes the audit retained, up to 1 MiB per file, and parse each file once for both CSS checks. Selectors are not matched and nothing is rendered or run.

A transition counts when a rule's transition or transition-property names top, left, width, height, box-shadow or a physical or logical margin property, and its duration plus delay is above zero; the last valid declaration and the last matching entry in the list apply. A zero duration does not hide a transition with a positive delay. A matching all entry with positive or unresolved combined time, or an unresolved expression such as var() or inherit, cannot prove the stylesheet clean.

A keyframe animation counts when a rule's animation or animation-name refers to exactly one @keyframes block in the same stylesheet, outside @media and similar conditions, and that block sets one of these properties. A name defined twice, inside a condition or only in another file cannot be checked; unreferenced keyframes containing these watched properties are not reported, but they keep the stylesheet from counting as clean. A zero animation duration is not treated as a fix.

One finding covers each stylesheet and lists every matching rule; its members are the audited pages that link the stylesheet. If a stylesheet cannot be fetched or read in full, its pages are marked as not checked.

Example & evidence

Illustrative example — schematic CSS, not a live audit.

A page of https://bakery.example/ links /assets/main.css, which contains this rule:

.x {
  transition: width 1s;
}

The rule transitions width, so the stylesheet is reported for review; whether any element uses .x is not known.

.x {
  transition: transform 1s;
}

A possible correction: transition transform instead. If the new audit retains only the start of the stylesheet, a clean beginning does not confirm the fix.

Confirm & check again

Check for yourself: open the stylesheet and search for transition and @keyframes; the Performance panel in Chrome's developer tools shows whether an effect actually moves content.

Check again: Full audit — run a new full audit of the site. The finding is confirmed fixed only when the same stylesheet is read in full, every page that linked it before is read and still links it, no transition or keyframe animation in it targets these properties, and nothing in it is left unchecked. A missing, cut-short or unreadable stylesheet, or a page that can no longer be read, leaves the finding unconfirmed.

Limits & sources

This is a static reading of CSS source: we do not match selectors to elements, run animations, or measure layout shift, responsiveness or which effects a browser composites, and switching to transform does not by itself prove a steadier or faster page. Only the listed properties are checked; stylesheets pulled in with @import, inline <style> blocks and animations started by JavaScript are not seen. Unsupported syntax, uncertain encoding and work limits also leave coverage incomplete; a stylesheet outside the audit's retained resource scope remains unchecked.

Confidence: Low because a declared transition or animation may never apply to a visible element or never run; the CSS alone cannot show its effect.

Sources

  • web.dev, Optimize Cumulative Layout Shift — says changes to box-shadow trigger re-layout, paint and compositing and changes to top and left cause layout shifts, advises against animating with these properties, and recommends transform animations, noting that composited translate animations do not count toward CLS. Checked 10 October 2026.
  • W3C, CSS Transitions Module Level 1 — defines transition-property with all as its initial value, and defines a transition's combined duration as the non-negative duration plus the delay; a transition starts only when that combined duration is greater than zero. Checked 10 October 2026.
  • W3C, CSS Animations Level 1 — defines @keyframes and animation-name, and states that a name that matches no @keyframes rule animates nothing. Checked 10 October 2026.

Editorial review: 15 October 2026