v152 · CSS

CSS Image Animation

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.

concepts

  1. Playback Lab

    Switch an actual animated image among normal, running, paused, and stopped.

  2. Animated Image Selector

    Compare :animated-image matching for animated and static resources.

  3. Reduced Motion Policy

    Apply an accessible document-level animation policy with a user override.

why it shipped

Authors need per-image playback control so looping images can meet pause, stop, and hide requirements without canvas rewrites.

references