Skip to content

Commit cd78f11

Browse files
committed
1 parent 4bfdf93 commit cd78f11

File tree

2 files changed

+64
-55
lines changed

2 files changed

+64
-55
lines changed

css-animations/Overview.bs

Lines changed: 17 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -134,8 +134,7 @@ Animations</h2>
134134
immediately in the case of a pseudo style rule such as hover, or may be
135135
when the scripting engine returns control to the browser (in the case of
136136
style applied by script). Note that dynamically updating keyframe style
137-
rules does not start or restart an animation.
138-
137+
rules does not start or re-start an animation.
139138

140139
An animation applies to an element if its name appears as one of the
141140
identifiers in the computed value of the 'animation-name' property and the
@@ -149,6 +148,22 @@ Animations</h2>
149148
Conversely, extending the 'animation-delay' may cause an animation to
150149
re-start and dispatch an <a idl>animationstart</a> event.
151150

151+
The same @keyframes rule name may be repeated within an 'animation-name'.
152+
Changes to the 'animation-name' update existing animations by iterating over
153+
the new list of animations from last to first, and, for each animation,
154+
finding the <em>last</em> matching animation in the list of existing
155+
animations.
156+
If a match is found, the existing animation is updated using the animation
157+
properties corresponding to its position in the new list of animations,
158+
whilst maintaining its current playback time as described above.
159+
The matching animation is removed from the existing list of animations such
160+
that it will not match twice.
161+
If a match is not found, a new animation is created.
162+
As a result, updating 'animation-name' from &lsquo;a&rsquo; to
163+
&lsquo;a, a&rsquo; will cause the existing animation for &lsquo;a&rsquo; to
164+
become the <em>second</em> animation in the list and a new animation will be
165+
created for the first item in the list.
166+
152167
<div class='example'>
153168
<pre>
154169
div {
@@ -178,15 +193,6 @@ Animations</h2>
178193

179194
</div>
180195

181-
<p class="issue" id="issue-track-animation-state">
182-
This specification should describe what information is part
183-
of the state of running animations,
184-
and how that information persists across changes to 'animation-name',
185-
particularly when a name is repeated
186-
within either the old or new value of 'animation-name'.
187-
See <a href="https://lists.w3.org/Archives/Public/www-style/2016May/0111.html">www-style post</a> and other messages in the same thread.
188-
</p>
189-
190196
Setting the 'display' property to ''display/none'' will terminate any running animation applied
191197
to the element and its descendants. If an element has a 'display' of ''display/none'', updating
192198
'display' to a value other than ''display/none'' will start all animations applied to the element

0 commit comments

Comments
 (0)