Skip to content

Commit d35cf94

Browse files
authored
[css-animations-1] Animations are only canceled if base and computed display are none. (w3c#8713)
1 parent 64fa7b9 commit d35cf94

File tree

2 files changed

+17
-11
lines changed

2 files changed

+17
-11
lines changed

css-animations-2/Overview.bs

+17-6
Original file line numberDiff line numberDiff line change
@@ -154,6 +154,17 @@ The <dfn>owning element</dfn> of an animation refers to the element or
154154
pseudo-element to which the 'animation-name' property was applied that generated
155155
the animation.
156156

157+
If the 'display' property of an element is set to ''display/none''
158+
and its 'display' value would compute to ''display/none'' when ignoring the Transitions and Animations [=cascade origins=],
159+
then terminate running animations with this <a>owning element</a>.
160+
If an element has a 'display' of ''display/none'' and
161+
its 'display' value had computed to ''display/none'' when ignoring the Transitions and Animations [=cascade origins=],
162+
updating 'display' to a value other than ''display/none''
163+
will start all animations applied to the element by the 'animation-name' property.
164+
165+
Note: In practice, this means that an animation to a 'display' value of ''display/none'' will not terminate running animations
166+
unless the style also computes to ''display/none'' without the effect of the animations.
167+
157168
If an animation generated using the markup defined in this specification is
158169
later disassociated from that markup by an update to the computed value of the
159170
'animation-name' property on the <a>owning element</a>, the animation is
@@ -597,7 +608,7 @@ Initial: auto
597608
Applies to: all elements
598609
Inherited: no
599610
Percentages: N/A
600-
Computed value: list, each item either a case-sensitive [=css identifier=] or
611+
Computed value: list, each item either a case-sensitive [=css identifier=] or
601612
the keywords ''single-animation-timeline/none'',
602613
''single-animation-timeline/auto''.
603614
Canonical order: per grammar
@@ -877,12 +888,12 @@ console.log(anim.playState); // Should be 'running'.
877888
878889
<h2 id="priv">
879890
Privacy Considerations</h2>
880-
891+
881892
No privacy concerns have been reported on this specification.
882-
893+
883894
<h2 id="sec">
884895
Security Considerations</h2>
885-
896+
886897
No security concerns have been reported on this specification.
887898
888899
<h2 id="changes">Changes</h2>
@@ -891,8 +902,8 @@ console.log(anim.playState); // Should be 'running'.
891902
892903
<ul>
893904
<li>
894-
The interaction between CSS Animations and Web Animations is defined,
895-
and the concepts of the owning element and animation composite order
905+
The interaction between CSS Animations and Web Animations is defined,
906+
and the concepts of the owning element and animation composite order
896907
are introduced.
897908
</li>
898909
<li>

css-display-4/Overview.bs

-5
Original file line numberDiff line numberDiff line change
@@ -874,11 +874,6 @@ Animating and Interpolating 'display'</h3>
874874
as long as its 'display' value would compute to ''display/none''
875875
when ignoring the Transitions and Animations [=cascade origins=].
876876

877-
Because a value of ''display/none'' would interrupt the animation,
878-
a declared value of ''display/none''
879-
in an <a spec=web-animations-1>animation effect</a> or ''@keyframes'' rule
880-
is replaced with ''display/revert-layer''.
881-
882877
<!--
883878
██ ██ ███████ ██ ██ ████████
884879
███ ██ ██ ██ ███ ██ ██

0 commit comments

Comments
 (0)