changeset
2011-04-05 dino@apple.com
Tue, 05 Apr 2011 19:15:19 +0000
- author
- Dean Jackson <dino@apple.com>
- date
- Tue, 05 Apr 2011 19:15:19 +0000
- changeset 2614
- 08c0c83446dd
- parent 2613
- c74105743bae
- child 2615
- 3b2fd214ef6d
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.1 --- a/css3-animations/ChangeLog Tue Apr 05 13:46:16 2011 +0000 1.2 +++ b/css3-animations/ChangeLog Tue Apr 05 19:15:19 2011 +0000 1.3 @@ -1,3 +1,16 @@ 1.4 +2011-04-05 dino@apple.com 1.5 + 1.6 +Changes from David Baron's feedback 1.7 + 1.8 +- describe that animationstart event fires after delay has expired 1.9 + either with a zero elapsedTime (in the case where delay >= 0) or 1.10 + -1 * delay (in the case where delay < 0) 1.11 +- if the same property is animated in multiple animations, then the 1.12 + animation-name closest to the end of the list wins. 1.13 +- animation-name is the dominant property for lists. Every other property 1.14 + repeats to fill whatever animation-name requires. 1.15 +- insertRule is now appendRule (always appends, does not replace) 1.16 + 1.17 2011-03-21 simon.fraser@apple.com 1.18 1.19 - Removed "Module Level 3" from the title. 1.20 @@ -13,6 +26,7 @@ 1.21 - list stepped timing functions 1.22 1.23 2010-03-23 simon.fraser@apple.com 1.24 + 1.25 - Better start to the Keyframes section 1.26 - Example 1 changed to use an identifier, rather than a string for the keyframes name. 1.27 - Changed paragraph stating that 'from' and 'to' keyframes are required to say that these
2.1 --- a/css3-animations/Overview.html Tue Apr 05 13:46:16 2011 +0000 2.2 +++ b/css3-animations/Overview.html Tue Apr 05 19:15:19 2011 +0000 2.3 @@ -3,7 +3,7 @@ 2.4 2.5 <html lang=en> 2.6 <head> 2.7 - <title>CSS Animations Module Level 3</title> 2.8 + <title>CSS Animations</title> 2.9 <link href=default.css rel=stylesheet type="text/css"> 2.10 2.11 <style type="text/css"> 2.12 @@ -27,17 +27,16 @@ 2.13 <p><a href="http://www.w3.org/"><img alt=W3C height=48 2.14 src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo--> 2.15 2.16 - <h1>CSS Animations Module Level 3</h1> 2.17 + <h1>CSS Animations</h1> 2.18 2.19 - <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 20 January 2.20 - 2011</h2> 2.21 + <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 5 April 2011</h2> 2.22 2.23 <dl> 2.24 <dt>This version: 2.25 2.26 <dd><a 2.27 - href="http://www.w3.org/TR/2011/ED-css3-animations-20110120">http://dev.w3.org/csswg/css3-animations/</a> 2.28 - <!--http://www.w3.org/TR/2011/WD-css3-animations-20110120--> 2.29 + href="http://www.w3.org/TR/2011/ED-css3-animations-20110405">http://dev.w3.org/csswg/css3-animations/</a> 2.30 + <!--http://www.w3.org/TR/2011/WD-css3-animations-20110405--> 2.31 2.32 <dt>Latest version: 2.33 2.34 @@ -345,8 +344,6 @@ 2.35 constructs a 100% keyframe using the computed values of the properties 2.36 being animated. 2.37 2.38 - <p class=issue> ISSUE: how does this work with repeating animations? 2.39 - 2.40 <p> The <i>keyframe declaration</i> for a keyframe rule consists of 2.41 properties and values. Properties that are unable to be animated are 2.42 ignored in these rules, with the exception of <a class=prop-name 2.43 @@ -491,7 +488,15 @@ 2.44 animated and the animation will not execute. Furthermore, if the animation 2.45 name is ‘<code class=property>none</code>’ then there will be 2.46 no animation. This can be used to override any animations coming from the 2.47 - cascade. 2.48 + cascade. If animations are attempting to modify the same property, then 2.49 + the animation closest to the end of the list of names wins. 2.50 + 2.51 + <p> Each animation listed by name should have a corresponding value for the 2.52 + other animation properties listed below. In the case where the other 2.53 + properties do not have lists of the correct length, their values are 2.54 + repeated to form a list with the same number of entries as <span 2.55 + class=prop-name>‘<a href="#animation-name"><code 2.56 + class=property>animation-name</code></a>’</span>. 2.57 2.58 <table class=propdef> 2.59 <tbody> 2.60 @@ -1215,9 +1220,10 @@ 2.61 2.62 <dd> The amount of time the animation has been running, in seconds, 2.63 when this event fired, excluding any time the animation was paused. 2.64 - Note that this value is not affected by the value of <a 2.65 - class=prop-name href="#animation-delay">animation-delay</a>. For an 2.66 - "animationstart" event, the elapsedTime is always zero. 2.67 + For an "animationstart" event, the elapsedTime is zero unless there 2.68 + was a negative value for <a class=prop-name 2.69 + href="#animation-delay">animation-delay</a>, in which case the event 2.70 + will be fired with an elapsedTime of (-1 * delay). 2.71 </dl> 2.72 2.73 <dt> <b>Methods</b> 2.74 @@ -1289,7 +1295,10 @@ 2.75 <dt> <b>animationstart</b> 2.76 2.77 <dd> The ‘<code class=property>animationstart</code>’ event 2.78 - occurs at the start of the animation 2.79 + occurs at the start of the animation. If there is an <a class=prop-name 2.80 + href="#animation-delay">animation-delay</a> then this event will fire 2.81 + once the delay period has expired. A negative delay will cause the event 2.82 + to fire with an elapsedTime equal to the absolute value of the delay. 2.83 <ul> 2.84 <li>Bubbles: Yes 2.85 2.86 @@ -1427,7 +1436,7 @@ 2.87 attribute DOMString name; 2.88 readonly attribute CSSRuleList cssRules; 2.89 2.90 - void insertRule(in DOMString rule); 2.91 + void appendRule(in DOMString rule); 2.92 void deleteRule(in DOMString key); 2.93 CSSKeyframeRule findRule(in DOMString key); 2.94 }; 2.95 @@ -1461,11 +1470,11 @@ 2.96 <dd> 2.97 <dl><!-- ======================================================================================================= --> 2.98 2.99 - <dt> <code class=method-name><a id=DOM-CSSKeyframesRule-insertRule 2.100 - name=DOM-CSSKeyframesRule-insertRule>insertRule</a></code> 2.101 + <dt> <code class=method-name><a id=DOM-CSSKeyframesRule-appendRule 2.102 + name=DOM-CSSKeyframesRule-appendRule>appendRule</a></code> 2.103 2.104 <dd> 2.105 - <div class=method> The <code>insertRule</code> method inserts the 2.106 + <div class=method> The <code>appendRule</code> method appends the 2.107 passed CSSKeyframeRule into the list at the passed key. 2.108 <div class=parameters> <b>Parameters</b> 2.109 <div class=paramtable> 2.110 @@ -1473,11 +1482,8 @@ 2.111 <dt> <code class=parameter-name>rule</code> of type 2.112 <code>DOMString</code> 2.113 2.114 - <dd> The rule to be inserted, expressed in the same syntax as one 2.115 - entry in the <code>@keyframes</code> rule. The key is included 2.116 - in the rule string, which described the point at which the rule 2.117 - should be inserted. If a rule with the same key already exists 2.118 - in the list, it is replaced with this rule. 2.119 + <dd> The rule to be appended, expressed in the same syntax as one 2.120 + entry in the <code>@keyframes</code> rule. 2.121 </dl> 2.122 </div> 2.123 </div>
3.1 --- a/css3-animations/Overview.src.html Tue Apr 05 13:46:16 2011 +0000 3.2 +++ b/css3-animations/Overview.src.html Tue Apr 05 19:15:19 2011 +0000 3.3 @@ -217,9 +217,6 @@ 3.4 constructs a 100% keyframe using the computed values of the properties 3.5 being animated. 3.6 </p> 3.7 - <p class="issue"> 3.8 - ISSUE: how does this work with repeating animations? 3.9 - </p> 3.10 <p> 3.11 The <i>keyframe declaration</i> for a keyframe rule consists of 3.12 properties and values. Properties that are unable to be 3.13 @@ -344,7 +341,16 @@ 3.14 not match any keyframe at-rule, there are no properties to be animated 3.15 and the animation will not execute. Furthermore, if the animation name 3.16 is 'none' then there will be no animation. This can be used to override 3.17 - any animations coming from the cascade. 3.18 + any animations coming from the cascade. If animations are attempting to 3.19 + modify the same property, then the animation closest to the end of the 3.20 + list of names wins. 3.21 + </p> 3.22 + <p> 3.23 + Each animation listed by name should have a corresponding value 3.24 + for the other animation properties listed below. In the case where the 3.25 + other properties do not have lists of the correct length, their values 3.26 + are repeated to form a list with the same number of entries as 3.27 + <span class="prop-name">'animation-name'</span>. 3.28 </p> 3.29 <table class="propdef"> 3.30 <tbody> 3.31 @@ -1203,7 +1209,9 @@ 3.32 <code class='attribute-name'><a id="Events-AnimationEvent-animationName" name='Events-AnimationEvent-animationName'>animationName</a></code> of type <code>DOMString</code>, readonly 3.33 </dt> 3.34 <dd> 3.35 - The value of the <span class="prop-name">animation-name</span> property of the animation that fired the event. 3.36 + The value of the <span 3.37 + class="prop-name">animation-name</span> property of the 3.38 + animation that fired the event. 3.39 </dd> 3.40 </dl> 3.41 <dl> 3.42 @@ -1211,7 +1219,13 @@ 3.43 <code class='attribute-name'><a id="Events-AnimationEvent-elapsedTime" name='Events-AnimationEvent-elapsedTime'>elapsedTime</a></code> of type <code>float</code>, readonly 3.44 </dt> 3.45 <dd> 3.46 - 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. 3.47 + The amount of time the animation has been running, in 3.48 + seconds, when this event fired, excluding any time the 3.49 + animation was paused. For an "animationstart" event, the 3.50 + elapsedTime is zero unless there was a negative value for 3.51 + <span class="prop-name">animation-delay</span>, in which 3.52 + case the event will be fired with an elapsedTime of (-1 * 3.53 + delay). 3.54 </dd> 3.55 </dl> 3.56 </dd> 3.57 @@ -1284,7 +1298,10 @@ 3.58 <b>animationstart</b> 3.59 </dt> 3.60 <dd> 3.61 - The 'animationstart' event occurs at the start of the animation 3.62 + The 'animationstart' event occurs at the start of the animation. If there is an <span 3.63 + class="prop-name">animation-delay</span> then this event will fire once the delay period 3.64 + has expired. A negative delay will cause the event to fire with an elapsedTime equal to 3.65 + the absolute value of the delay. 3.66 <ul> 3.67 <li>Bubbles: Yes 3.68 </li> 3.69 @@ -1431,7 +1448,7 @@ 3.70 attribute DOMString name; 3.71 readonly attribute CSSRuleList cssRules; 3.72 3.73 - void insertRule(in DOMString rule); 3.74 + void appendRule(in DOMString rule); 3.75 void deleteRule(in DOMString key); 3.76 CSSKeyframeRule findRule(in DOMString key); 3.77 }; 3.78 @@ -1467,11 +1484,11 @@ 3.79 <dl> 3.80 <!-- ======================================================================================================= --> 3.81 <dt> 3.82 - <code class='method-name'><a id="DOM-CSSKeyframesRule-insertRule" name='DOM-CSSKeyframesRule-insertRule'>insertRule</a></code> 3.83 + <code class='method-name'><a id="DOM-CSSKeyframesRule-appendRule" name='DOM-CSSKeyframesRule-appendRule'>appendRule</a></code> 3.84 </dt> 3.85 <dd> 3.86 <div class='method'> 3.87 - The <code>insertRule</code> method inserts the passed CSSKeyframeRule into the list at the passed key. 3.88 + The <code>appendRule</code> method appends the passed CSSKeyframeRule into the list at the passed key. 3.89 <div class='parameters'> 3.90 <b>Parameters</b> 3.91 <div class='paramtable'> 3.92 @@ -1480,10 +1497,8 @@ 3.93 <code class='parameter-name'>rule</code> of type <code>DOMString</code> 3.94 </dt> 3.95 <dd> 3.96 - The rule to be inserted, expressed in the same syntax as one entry in the 3.97 - <code>@keyframes</code> rule. The key is included in the rule string, which described the 3.98 - point at which the rule should be inserted. If a rule with the same key already exists in 3.99 - the list, it is replaced with this rule. 3.100 + The rule to be appended, expressed in the same syntax as one entry in the 3.101 + <code>@keyframes</code> rule. 3.102 </dd> 3.103 </dl> 3.104 </div>
