Skip to content

[css-image-animation] Define what state 'running' starts from #13638

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
frivoal merged 2 commits into from
Mar 16, 2026
Merged

[css-image-animation] Define what state 'running' starts from #13638

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e10250e
[css-image-animation] Define what state 'running' starts from
frivoal Mar 12, 2026
0c9466a
Clarify what happens with new elements and display:none
frivoal Mar 16, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 14 additions & 3 deletions css-image-animation-1/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,7 +132,7 @@ Controlling Image Animations: the 'image-animation' property {#image-animation}
<dd>
Like ''normal'',
the animation of [=animated images=] is run normally,
as determined by the image format and the host language,
as determined by the image format and the host language.

However,
animation timelines are scoped per element:
Expand All @@ -141,8 +141,19 @@ Controlling Image Animations: the 'image-animation' property {#image-animation}
the same image data,
and with an 'image-animation' computed value of ''running''
must be rendered synchronized to the same timeline as a group,
distinct from the timeline of images in other elements,
with the timeline starting at the time of the least recent addition to the group.
distinct from the timeline of images in other elements.

If images are added to the element while the computed value is ''running'',
the timeline starts at the time of the least recent addition to the group.
Comment thread
frivoal marked this conversation as resolved.

If the element is created or made visible after having previously been set to ''display: none'',
with images already added and with 'image-animation' already set to ''running'',
the timeline starts when the element is included in the layout.

If this property is switched to ''running'' from another value,
the beginnig of this timeline is set
so that the animation continues from the state that was displayed
at the timem of the switch.
</dl>

<div class=example id=prefers>
Expand Down