diagnostic · one of 36 free, no counter

Animation

Q: What makes an animation composited?

It drives transform, opacity, filter or a handful of others that the compositor can apply without re-running layout. Anything driving a geometric property costs a layout pass per frame.

Q: How does reduced motion come into it?

A page that animates regardless of prefers-reduced-motion is reported here and in Preferences. This one says what is running; that one says what the page was asked for.

What is animating on this page, and what is it costing?

An animation on transform or opacity runs on the compositor and costs almost nothing; the same animation on top or width re-lays-out the page every frame. Both look identical in the source and completely different on a mid-range phone. This lists what is running right now and which side of that line each one is on.

Reach it Press ⌘ + K on any tab and type animation. Ctrl + K on Windows and Linux

Every transition and keyframe running, and which ones ignore reduced motion

reads running animations and transitions

writes nothing

sends nothing

marks composited against layout-triggering

infinite named, because it never stops costing

reduced motion reported against what the page respects

plan free

Add LoupeKit

TWO BUILDS 9 browsers

Chrome from the Chrome Web Store Firefox from addons.mozilla.org Edge from Microsoft Edge Add-ons Brave takes the Chrome build Opera takes the Chrome build 4 more the Chrome build

in the panel · free, no counter

section#about

What this actually is

every running animation and what it costs per frame

On a page that stutters, on a battery complaint, and on any site with a decorative animation that never ends - an infinite animation on a non-composited property is a page that never stops working.

section#asked

Asked about this diagnostic

4 of them

What makes an animation composited?

It drives transform, opacity, filter or a handful of others that the compositor can apply without re-running layout. Anything driving a geometric property costs a layout pass per frame.

Why does it single out infinite animations?

Because they never stop. A two-hundred-millisecond layout-triggering transition is a cost you pay once; the same properties on an infinite loop is a page that keeps a core busy for as long as the tab is open.

Does it show animations that have not started?

No - it lists what is running when you read. A declared animation waiting on a scroll trigger is not costing anything yet, and reporting it as running would be wrong.

How does reduced motion come into it?

A page that animates regardless of prefers-reduced-motion is reported here and in Preferences. This one says what is running; that one says what the page was asked for.

how to use animation

Open Animation. Everything running on the page right now is listed as it starts.
Read the property column: transform and opacity run on the compositor, top and width do not.
Find the rows marked infinite - an endless animation on a layout property never stops costing.
Check the reduced-motion row against what the page respects, then take the property to the stylesheet.

Add LoupeKit

TWO BUILDS 9 browsers

Chrome from the Chrome Web Store Firefox from addons.mozilla.org Edge from Microsoft Edge Add-ons Brave takes the Chrome build Opera takes the Chrome build 4 more the Chrome build

70 of these · no host permissions · three free audits