Add CSS Image Animation, currently `image-animation` & `:animated-image`

[Schweinepriester]

• https://mastodon.social/@intenttoship.dev@bsky.brid.gy/115898092826563066
• https://groups.google.com/a/chromium.org/g/blink-dev/c/0kUk5-6TAfM/m/7YVGLKzEBwAJ
• https://github.com/webplatformco/project-image-animation/tree/main/image-animation-property
• https://webplatform.design/projects/image-animation/image-animation-property/spec/overview
• [css-images] Disabling image animation w3c/csswg-drafts#1615
• https://issues.chromium.org/u/2/issues/429459566
• https://chromestatus.com/feature/5078177326170112?gate=6328097936900096

Summary

Introduces a new CSS property and pseudo-class to control and detect animated images like GIFs and APNGs. 1. image-animation: Can be set to "normal", "running", or "paused" to control image animation playback. 2. :animated-image: A pseudo-class to determine whether an image is animated.

Motivation

Currently, user agents autoplay animated images (e.g., GIF, WebP, PNG) by default. This behavior can be violate accessibility standards regarding pausing and stopping content. Site authors currently lack mechanisms to control this playback. The only existing methods are browser-specific global settings, which are inconsistent and lack the features needed for developers to build accessible, per-image playback interfaces.