Re: [csswg-drafts] [css-images] Disabling image animation (#1615)

I agree there's a need here.
 
* It's not possible to play animated GIFs/APNG via the video element (and thus the pausing abilities of this element aren't available for animated GIF/APNG).
* it's not possible control play/pause of `<img>` or `<picture>` element which are displaying an animated GIF/APNG
* it's not possible control play/pause of background images displaying an animated GIF/APNG

The later two could possibly be done by an HTML attribute, some JS API, or some CSS property, but none of them exist.

Even though we currently don't treat them as such, animated GIFs/APNG effectively are (muted) videos. They're just as much moving pictures as things that fit in the video element are.

All the reasons for why it can be desirable to pause/resume videos are applicable to them as well. https://github.com/w3c/csswg-drafts/issues/1615#issuecomment-2652101726 gives some reasonable use cases, Here are some more:
* load them paused, play when the user says so by clicking a play button or some similar control (needs to be an author control, so that it can be applied to the animated images where that's relevant, which is not all of them)
* same as above, but only when `prefers-reduced-motion: recude` is on (the UA doing it instead of the author is no more appropriate than it would be for the UA to disable all videos without a way to turn them back on)
* automatically play/pause based on scrolling position or state of other UI components
* display a grid of paused images, play only the one being hovered (think of the NetFlix or Youtube home pages)
* use them as sprites in a game and control their animation
* …

One answer might just be "don't use animated GIFs / APNGs, use actual video formats". However, even though the `<video>` tag has been introduced many years ago, people keep using these simpler formats for animated content, and web site operators also keep having to deal with them in user-generated content. And so the need for the ability to pause them remains.

I am not 100% sure whether this is a CSS issue or an HTML one, but I'm going with CSS, as a CSS solution could be applicable to foreground and background images, in a way that an HTML one could not.

My main point is not how it should be solved, but that it should be solved. Here's a straw-man variation on the earlier `image-animation-play-state: running | paused`. But that seems like a wrong approach, I am more than happy to hear what a right approach would be.

`image-animation: synchronized | independent | paused <time>?`
* `synchronized` would be the current default, where GIFs / APNGs autoplay AND all instances of the same image (determined by URL) play synchronously
* `paused` would block the animation. The optional `<time>` lets you specify in what state it gets paused, based on what the animation looks like if you let it run from the start for a duration of `<time>`.
* independent would also be auto-playing, but without the requirement to be synchronized with other instances of the same image, and so when you start from the paused state, it starts in that state and lives its own life, and doesn't jump to synchronize itself with other instances of the same image

-- 
GitHub Notification of comment by frivoal
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/1615#issuecomment-2841392258 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 30 April 2025 09:37:19 UTC