Skip to content

Commit 477d4f2

Browse files
grorggrorg
committed
2011-04-05 dino@apple.com
Changes from David Baron's feedback - describe that animationstart event fires after delay has expired either with a zero elapsedTime (in the case where delay >= 0) or -1 * delay (in the case where delay < 0) - if the same property is animated in multiple animations, then the animation-name closest to the end of the list wins. - animation-name is the dominant property for lists. Every other property repeats to fill whatever animation-name requires. - insertRule is now appendRule (always appends, does not replace)
1 parent 95e53fc commit 477d4f2

File tree

3 files changed

+71
-36
lines changed

3 files changed

+71
-36
lines changed

‎css3-animations/ChangeLog‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,16 @@
1+
2011-04-05 dino@apple.com
2+
3+
Changes from David Baron's feedback
4+
5+
- describe that animationstart event fires after delay has expired
6+
either with a zero elapsedTime (in the case where delay >= 0) or
7+
-1 * delay (in the case where delay < 0)
8+
- if the same property is animated in multiple animations, then the
9+
animation-name closest to the end of the list wins.
10+
- animation-name is the dominant property for lists. Every other property
11+
repeats to fill whatever animation-name requires.
12+
- insertRule is now appendRule (always appends, does not replace)
13+
114
2011-03-21 simon.fraser@apple.com
215

316
- Removed "Module Level 3" from the title.
@@ -13,6 +26,7 @@ and animation-delay in the shorthand.
1326
- list stepped timing functions
1427

1528
2010-03-23 simon.fraser@apple.com
29+
1630
- Better start to the Keyframes section
1731
- Example 1 changed to use an identifier, rather than a string for the keyframes name.
1832
- Changed paragraph stating that 'from' and 'to' keyframes are required to say that these

‎css3-animations/Overview.html‎

Lines changed: 28 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33

44
<html lang=en>
55
<head>
6-
<title>CSS Animations Module Level 3</title>
6+
<title>CSS Animations</title>
77
<link href=default.css rel=stylesheet type="text/css">
88

99
<style type="text/css">
@@ -27,17 +27,16 @@
2727
<p><a href="http://www.w3.org/"><img alt=W3C height=48
2828
src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo-->
2929

30-
<h1>CSS Animations Module Level 3</h1>
30+
<h1>CSS Animations</h1>
3131

32-
<h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 20 January
33-
2011</h2>
32+
<h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 5 April 2011</h2>
3433

3534
<dl>
3635
<dt>This version:
3736

3837
<dd><a
39-
href="http://www.w3.org/TR/2011/ED-css3-animations-20110120">http://dev.w3.org/csswg/css3-animations/</a>
40-
<!--http://www.w3.org/TR/2011/WD-css3-animations-20110120-->
38+
href="http://www.w3.org/TR/2011/ED-css3-animations-20110405">http://dev.w3.org/csswg/css3-animations/</a>
39+
<!--http://www.w3.org/TR/2011/WD-css3-animations-20110405-->
4140

4241
<dt>Latest version:
4342

@@ -345,8 +344,6 @@ <h2 id=keyframes><span class=secno>3. </span>Keyframes</h2>
345344
constructs a 100% keyframe using the computed values of the properties
346345
being animated.
347346

348-
<p class=issue> ISSUE: how does this work with repeating animations?
349-
350347
<p> The <i>keyframe declaration</i> for a keyframe rule consists of
351348
properties and values. Properties that are unable to be animated are
352349
ignored in these rules, with the exception of <a class=prop-name
@@ -491,7 +488,15 @@ <h3 id=the-animation-name-property-><span class=secno>3.2. </span> The
491488
animated and the animation will not execute. Furthermore, if the animation
492489
name is &lsquo;<code class=property>none</code>&rsquo; then there will be
493490
no animation. This can be used to override any animations coming from the
494-
cascade.
491+
cascade. If animations are attempting to modify the same property, then
492+
the animation closest to the end of the list of names wins.
493+
494+
<p> Each animation listed by name should have a corresponding value for the
495+
other animation properties listed below. In the case where the other
496+
properties do not have lists of the correct length, their values are
497+
repeated to form a list with the same number of entries as <span
498+
class=prop-name>&lsquo;<a href="#animation-name"><code
499+
class=property>animation-name</code></a>&rsquo;</span>.
495500

496501
<table class=propdef>
497502
<tbody>
@@ -1215,9 +1220,10 @@ <h2 id=animation-events-><span class=secno>4. </span> Animation Events</h2>
12151220

12161221
<dd> The amount of time the animation has been running, in seconds,
12171222
when this event fired, excluding any time the animation was paused.
1218-
Note that this value is not affected by the value of <a
1219-
class=prop-name href="#animation-delay">animation-delay</a>. For an
1220-
"animationstart" event, the elapsedTime is always zero.
1223+
For an "animationstart" event, the elapsedTime is zero unless there
1224+
was a negative value for <a class=prop-name
1225+
href="#animation-delay">animation-delay</a>, in which case the event
1226+
will be fired with an elapsedTime of (-1 * delay).
12211227
</dl>
12221228

12231229
<dt> <b>Methods</b>
@@ -1289,7 +1295,10 @@ <h2 id=animation-events-><span class=secno>4. </span> Animation Events</h2>
12891295
<dt> <b>animationstart</b>
12901296

12911297
<dd> The &lsquo;<code class=property>animationstart</code>&rsquo; event
1292-
occurs at the start of the animation
1298+
occurs at the start of the animation. If there is an <a class=prop-name
1299+
href="#animation-delay">animation-delay</a> then this event will fire
1300+
once the delay period has expired. A negative delay will cause the event
1301+
to fire with an elapsedTime equal to the absolute value of the delay.
12931302
<ul>
12941303
<li>Bubbles: Yes
12951304

@@ -1427,7 +1436,7 @@ <h2 id=dom-interfaces-><span class=secno>5. </span> DOM Interfaces</h2>
14271436
attribute DOMString name;
14281437
readonly attribute CSSRuleList cssRules;
14291438

1430-
void insertRule(in DOMString rule);
1439+
void appendRule(in DOMString rule);
14311440
void deleteRule(in DOMString key);
14321441
CSSKeyframeRule findRule(in DOMString key);
14331442
};
@@ -1461,23 +1470,20 @@ <h2 id=dom-interfaces-><span class=secno>5. </span> DOM Interfaces</h2>
14611470
<dd>
14621471
<dl><!-- ======================================================================================================= -->
14631472

1464-
<dt> <code class=method-name><a id=DOM-CSSKeyframesRule-insertRule
1465-
name=DOM-CSSKeyframesRule-insertRule>insertRule</a></code>
1473+
<dt> <code class=method-name><a id=DOM-CSSKeyframesRule-appendRule
1474+
name=DOM-CSSKeyframesRule-appendRule>appendRule</a></code>
14661475

14671476
<dd>
1468-
<div class=method> The <code>insertRule</code> method inserts the
1477+
<div class=method> The <code>appendRule</code> method appends the
14691478
passed CSSKeyframeRule into the list at the passed key.
14701479
<div class=parameters> <b>Parameters</b>
14711480
<div class=paramtable>
14721481
<dl>
14731482
<dt> <code class=parameter-name>rule</code> of type
14741483
<code>DOMString</code>
14751484

1476-
<dd> The rule to be inserted, expressed in the same syntax as one
1477-
entry in the <code>@keyframes</code> rule. The key is included
1478-
in the rule string, which described the point at which the rule
1479-
should be inserted. If a rule with the same key already exists
1480-
in the list, it is replaced with this rule.
1485+
<dd> The rule to be appended, expressed in the same syntax as one
1486+
entry in the <code>@keyframes</code> rule.
14811487
</dl>
14821488
</div>
14831489
</div>

‎css3-animations/Overview.src.html‎

Lines changed: 29 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -217,9 +217,6 @@ <h2>Keyframes</h2>
217217
constructs a 100% keyframe using the computed values of the properties
218218
being animated.
219219
</p>
220-
<p class="issue">
221-
ISSUE: how does this work with repeating animations?
222-
</p>
223220
<p>
224221
The <i>keyframe declaration</i> for a keyframe rule consists of
225222
properties and values. Properties that are unable to be
@@ -344,7 +341,16 @@ <h3>
344341
not match any keyframe at-rule, there are no properties to be animated
345342
and the animation will not execute. Furthermore, if the animation name
346343
is 'none' then there will be no animation. This can be used to override
347-
any animations coming from the cascade.
344+
any animations coming from the cascade. If animations are attempting to
345+
modify the same property, then the animation closest to the end of the
346+
list of names wins.
347+
</p>
348+
<p>
349+
Each animation listed by name should have a corresponding value
350+
for the other animation properties listed below. In the case where the
351+
other properties do not have lists of the correct length, their values
352+
are repeated to form a list with the same number of entries as
353+
<span class="prop-name">'animation-name'</span>.
348354
</p>
349355
<table class="propdef">
350356
<tbody>
@@ -1203,15 +1209,23 @@ <h2>
12031209
<code class='attribute-name'><a id="Events-AnimationEvent-animationName" name='Events-AnimationEvent-animationName'>animationName</a></code> of type <code>DOMString</code>, readonly
12041210
</dt>
12051211
<dd>
1206-
The value of the <span class="prop-name">animation-name</span> property of the animation that fired the event.
1212+
The value of the <span
1213+
class="prop-name">animation-name</span> property of the
1214+
animation that fired the event.
12071215
</dd>
12081216
</dl>
12091217
<dl>
12101218
<dt>
12111219
<code class='attribute-name'><a id="Events-AnimationEvent-elapsedTime" name='Events-AnimationEvent-elapsedTime'>elapsedTime</a></code> of type <code>float</code>, readonly
12121220
</dt>
12131221
<dd>
1214-
The amount of time the animation has been running, in seconds, when this event fired, excluding any time the animation was paused. Note that this value is not affected by the value of <span class="prop-name">animation-delay</span>. For an "animationstart" event, the elapsedTime is always zero.
1222+
The amount of time the animation has been running, in
1223+
seconds, when this event fired, excluding any time the
1224+
animation was paused. For an "animationstart" event, the
1225+
elapsedTime is zero unless there was a negative value for
1226+
<span class="prop-name">animation-delay</span>, in which
1227+
case the event will be fired with an elapsedTime of (-1 *
1228+
delay).
12151229
</dd>
12161230
</dl>
12171231
</dd>
@@ -1284,7 +1298,10 @@ <h2>
12841298
<b>animationstart</b>
12851299
</dt>
12861300
<dd>
1287-
The 'animationstart' event occurs at the start of the animation
1301+
The 'animationstart' event occurs at the start of the animation. If there is an <span
1302+
class="prop-name">animation-delay</span> then this event will fire once the delay period
1303+
has expired. A negative delay will cause the event to fire with an elapsedTime equal to
1304+
the absolute value of the delay.
12881305
<ul>
12891306
<li>Bubbles: Yes
12901307
</li>
@@ -1431,7 +1448,7 @@ <h2>
14311448
attribute DOMString name;
14321449
readonly attribute CSSRuleList cssRules;
14331450

1434-
void insertRule(in DOMString rule);
1451+
void appendRule(in DOMString rule);
14351452
void deleteRule(in DOMString key);
14361453
CSSKeyframeRule findRule(in DOMString key);
14371454
};
@@ -1467,11 +1484,11 @@ <h2>
14671484
<dl>
14681485
<!-- ======================================================================================================= -->
14691486
<dt>
1470-
<code class='method-name'><a id="DOM-CSSKeyframesRule-insertRule" name='DOM-CSSKeyframesRule-insertRule'>insertRule</a></code>
1487+
<code class='method-name'><a id="DOM-CSSKeyframesRule-appendRule" name='DOM-CSSKeyframesRule-appendRule'>appendRule</a></code>
14711488
</dt>
14721489
<dd>
14731490
<div class='method'>
1474-
The <code>insertRule</code> method inserts the passed CSSKeyframeRule into the list at the passed key.
1491+
The <code>appendRule</code> method appends the passed CSSKeyframeRule into the list at the passed key.
14751492
<div class='parameters'>
14761493
<b>Parameters</b>
14771494
<div class='paramtable'>
@@ -1480,10 +1497,8 @@ <h2>
14801497
<code class='parameter-name'>rule</code> of type <code>DOMString</code>
14811498
</dt>
14821499
<dd>
1483-
The rule to be inserted, expressed in the same syntax as one entry in the
1484-
<code>@keyframes</code> rule. The key is included in the rule string, which described the
1485-
point at which the rule should be inserted. If a rule with the same key already exists in
1486-
the list, it is replaced with this rule.
1500+
The rule to be appended, expressed in the same syntax as one entry in the
1501+
<code>@keyframes</code> rule.
14871502
</dd>
14881503
</dl>
14891504
</div>

0 commit comments

Comments
 (0)