Skip to content
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.

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

[css-animations-1] Animations are only canceled if base and computed display are none. #8713

Merged
merged 2 commits into from
Apr 20, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
23 changes: 17 additions & 6 deletions css-animations-2/Overview.bs
Original file line number Diff line number Diff line change
Expand Up @@ -154,6 +154,17 @@ The <dfn>owning element</dfn> of an animation refers to the element or
pseudo-element to which the 'animation-name' property was applied that generated
the animation.

If the 'display' property of an element is set to ''display/none''
and its 'display' value would compute to ''display/none'' when ignoring the Transitions and Animations [=cascade origins=],
then terminate running animations with this <a>owning element</a>.
If an element has a 'display' of ''display/none'' and
its 'display' value had computed to ''display/none'' when ignoring the Transitions and Animations [=cascade origins=],
updating 'display' to a value other than ''display/none''
will start all animations applied to the element by the 'animation-name' property.

Note: In practice, this means that an animation to a 'display' value of ''display/none'' will not terminate running animations
unless the style also computes to ''display/none'' without the effect of the animations.

If an animation generated using the markup defined in this specification is
later disassociated from that markup by an update to the computed value of the
'animation-name' property on the <a>owning element</a>, the animation is
Expand Down Expand Up @@ -597,7 +608,7 @@ Initial: auto
Applies to: all elements
Inherited: no
Percentages: N/A
Computed value: list, each item either a case-sensitive [=css identifier=] or
Computed value: list, each item either a case-sensitive [=css identifier=] or
the keywords ''single-animation-timeline/none'',
''single-animation-timeline/auto''.
Canonical order: per grammar
Expand Down Expand Up @@ -877,12 +888,12 @@ console.log(anim.playState); // Should be 'running'.

<h2 id="priv">
Privacy Considerations</h2>

No privacy concerns have been reported on this specification.

<h2 id="sec">
Security Considerations</h2>

No security concerns have been reported on this specification.

<h2 id="changes">Changes</h2>
Expand All @@ -891,8 +902,8 @@ console.log(anim.playState); // Should be 'running'.

<ul>
<li>
The interaction between CSS Animations and Web Animations is defined,
and the concepts of the owning element and animation composite order
The interaction between CSS Animations and Web Animations is defined,
and the concepts of the owning element and animation composite order
are introduced.
</li>
<li>
Expand Down
5 changes: 0 additions & 5 deletions css-display-4/Overview.bs
Original file line number Diff line number Diff line change
Expand Up @@ -874,11 +874,6 @@ Animating and Interpolating 'display'</h3>
as long as its 'display' value would compute to ''display/none''
when ignoring the Transitions and Animations [=cascade origins=].

Because a value of ''display/none'' would interrupt the animation,
a declared value of ''display/none''
in an <a spec=web-animations-1>animation effect</a> or ''@keyframes'' rule
is replaced with ''display/revert-layer''.

<!--
██ ██ ███████ ██ ██ ████████
███ ██ ██ ██ ███ ██ ██
Expand Down