Quick answer: The layout-animations directive is an experimental Feature-Policy control that restricts CSS animations and transitions on properties that trigger layout, such as top, left, width, and height. Disallow them with the response header Feature-Policy: layout-animations 'none'. It steers developers toward compositor-friendly transform and opacity animations for smoother performance. It is not widely standardized.
anitpatternperformance

layout-animations

This policy controls the ability of a document to perform animations that require updates to layout, rather than simply repaints, which are typically cheaper and allow for smoother animations. So-called 'layout animations' can require significant CPU and often cannot be rendered smoothly.

If a document is disallowed from performing layout animations by this policy, only the inital and final states of the animation will be rendered.

How to apply this policy

Send the following HTTP header to control the layout-animations policy, and disallow it on all origins:

Feature-Policy: layout-animations 'none'

Does it work?

Currently Firefox, and Chromium based browsers, such as Google Chrome, Samsung Internet, and Opera, are the only user-agents to support Feature Policy. The minimum version that correctly recognises the layout-animations policy is:

Mozilla Firefox

Not supported

Google Chrome

74+

Microsoft Edge

Not supported

Apple Safari

Not supported

Discussion