- From: Dean Jackson via cvs-syncmail <cvsmail@w3.org>
- Date: Tue, 05 Apr 2011 19:15:22 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-animations
In directory hutz:/tmp/cvs-serv26977
Modified Files:
ChangeLog Overview.html Overview.src.html
Log Message:
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)
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-animations/Overview.html,v
retrieving revision 1.7
retrieving revision 1.8
diff -u -d -r1.7 -r1.8
--- Overview.html 20 Jan 2011 22:54:28 -0000 1.7
+++ Overview.html 5 Apr 2011 19:15:19 -0000 1.8
@@ -3,7 +3,7 @@
<html lang=en>
<head>
- <title>CSS Animations Module Level 3</title>
+ <title>CSS Animations</title>
<link href=default.css rel=stylesheet type="text/css">
<style type="text/css">
@@ -27,17 +27,16 @@
<p><a href="http://www.w3.org/"><img alt=W3C height=48
src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo-->
- <h1>CSS Animations Module Level 3</h1>
+ <h1>CSS Animations</h1>
- <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 20 January
- 2011</h2>
+ <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 5 April 2011</h2>
<dl>
<dt>This version:
<dd><a
- href="http://www.w3.org/TR/2011/ED-css3-animations-20110120">http://dev.w3.org/csswg/css3-animations/</a>
- <!--http://www.w3.org/TR/2011/WD-css3-animations-20110120-->
+ href="http://www.w3.org/TR/2011/ED-css3-animations-20110405">http://dev.w3.org/csswg/css3-animations/</a>
+ <!--http://www.w3.org/TR/2011/WD-css3-animations-20110405-->
<dt>Latest version:
@@ -345,8 +344,6 @@
constructs a 100% keyframe using the computed values of the properties
being animated.
- <p class=issue> ISSUE: how does this work with repeating animations?
-
<p> The <i>keyframe declaration</i> for a keyframe rule consists of
properties and values. Properties that are unable to be animated are
ignored in these rules, with the exception of <a class=prop-name
@@ -491,7 +488,15 @@
animated and the animation will not execute. Furthermore, if the animation
name is ‘<code class=property>none</code>’ then there will be
no animation. This can be used to override any animations coming from the
- cascade.
+ cascade. If animations are attempting to modify the same property, then
+ the animation closest to the end of the list of names wins.
+
+ <p> Each animation listed by name should have a corresponding value for the
+ other animation properties listed below. In the case where the other
+ properties do not have lists of the correct length, their values are
+ repeated to form a list with the same number of entries as <span
+ class=prop-name>‘<a href="#animation-name"><code
+ class=property>animation-name</code></a>’</span>.
<table class=propdef>
<tbody>
@@ -1215,9 +1220,10 @@
<dd> 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 <a
- class=prop-name href="#animation-delay">animation-delay</a>. For an
- "animationstart" event, the elapsedTime is always zero.
+ For an "animationstart" event, the elapsedTime is zero unless there
+ was a negative value for <a class=prop-name
+ href="#animation-delay">animation-delay</a>, in which case the event
+ will be fired with an elapsedTime of (-1 * delay).
</dl>
<dt> <b>Methods</b>
@@ -1289,7 +1295,10 @@
<dt> <b>animationstart</b>
<dd> The ‘<code class=property>animationstart</code>’ event
- occurs at the start of the animation
+ occurs at the start of the animation. If there is an <a class=prop-name
+ href="#animation-delay">animation-delay</a> then this event will fire
+ once the delay period has expired. A negative delay will cause the event
+ to fire with an elapsedTime equal to the absolute value of the delay.
<ul>
<li>Bubbles: Yes
@@ -1427,7 +1436,7 @@
attribute DOMString name;
readonly attribute CSSRuleList cssRules;
- void insertRule(in DOMString rule);
+ void appendRule(in DOMString rule);
void deleteRule(in DOMString key);
CSSKeyframeRule findRule(in DOMString key);
};
@@ -1461,11 +1470,11 @@
<dd>
<dl><!-- ======================================================================================================= -->
- <dt> <code class=method-name><a id=DOM-CSSKeyframesRule-insertRule
- name=DOM-CSSKeyframesRule-insertRule>insertRule</a></code>
+ <dt> <code class=method-name><a id=DOM-CSSKeyframesRule-appendRule
+ name=DOM-CSSKeyframesRule-appendRule>appendRule</a></code>
<dd>
- <div class=method> The <code>insertRule</code> method inserts the
+ <div class=method> The <code>appendRule</code> method appends the
passed CSSKeyframeRule into the list at the passed key.
<div class=parameters> <b>Parameters</b>
<div class=paramtable>
@@ -1473,11 +1482,8 @@
<dt> <code class=parameter-name>rule</code> of type
<code>DOMString</code>
- <dd> The rule to be inserted, expressed in the same syntax as one
- entry in the <code>@keyframes</code> rule. The key is included
- in the rule string, which described the point at which the rule
- should be inserted. If a rule with the same key already exists
- in the list, it is replaced with this rule.
+ <dd> The rule to be appended, expressed in the same syntax as one
+ entry in the <code>@keyframes</code> rule.
</dl>
</div>
</div>
Index: ChangeLog
===================================================================
RCS file: /sources/public/csswg/css3-animations/ChangeLog,v
retrieving revision 1.5
retrieving revision 1.6
diff -u -d -r1.5 -r1.6
--- ChangeLog 21 Mar 2011 21:20:56 -0000 1.5
+++ ChangeLog 5 Apr 2011 19:15:19 -0000 1.6
@@ -1,3 +1,16 @@
+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)
+
2011-03-21 simon.fraser@apple.com
- Removed "Module Level 3" from the title.
@@ -13,6 +26,7 @@
- list stepped timing functions
2010-03-23 simon.fraser@apple.com
+
- Better start to the Keyframes section
- Example 1 changed to use an identifier, rather than a string for the keyframes name.
- Changed paragraph stating that 'from' and 'to' keyframes are required to say that these
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-animations/Overview.src.html,v
retrieving revision 1.8
retrieving revision 1.9
diff -u -d -r1.8 -r1.9
--- Overview.src.html 21 Mar 2011 21:20:56 -0000 1.8
+++ Overview.src.html 5 Apr 2011 19:15:19 -0000 1.9
@@ -217,9 +217,6 @@
constructs a 100% keyframe using the computed values of the properties
being animated.
</p>
- <p class="issue">
- ISSUE: how does this work with repeating animations?
- </p>
<p>
The <i>keyframe declaration</i> for a keyframe rule consists of
properties and values. Properties that are unable to be
@@ -344,7 +341,16 @@
not match any keyframe at-rule, there are no properties to be animated
and the animation will not execute. Furthermore, if the animation name
is 'none' then there will be no animation. This can be used to override
- any animations coming from the cascade.
+ any animations coming from the cascade. If animations are attempting to
+ modify the same property, then the animation closest to the end of the
+ list of names wins.
+ </p>
+ <p>
+ Each animation listed by name should have a corresponding value
+ for the other animation properties listed below. In the case where the
+ other properties do not have lists of the correct length, their values
+ are repeated to form a list with the same number of entries as
+ <span class="prop-name">'animation-name'</span>.
</p>
<table class="propdef">
<tbody>
@@ -1203,7 +1209,9 @@
<code class='attribute-name'><a id="Events-AnimationEvent-animationName" name='Events-AnimationEvent-animationName'>animationName</a></code> of type <code>DOMString</code>, readonly
</dt>
<dd>
- The value of the <span class="prop-name">animation-name</span> property of the animation that fired the event.
+ The value of the <span
+ class="prop-name">animation-name</span> property of the
+ animation that fired the event.
</dd>
</dl>
<dl>
@@ -1211,7 +1219,13 @@
<code class='attribute-name'><a id="Events-AnimationEvent-elapsedTime" name='Events-AnimationEvent-elapsedTime'>elapsedTime</a></code> of type <code>float</code>, readonly
</dt>
<dd>
- 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.
+ The amount of time the animation has been running, in
+ seconds, when this event fired, excluding any time the
+ animation was paused. For an "animationstart" event, the
+ elapsedTime is zero unless there was a negative value for
+ <span class="prop-name">animation-delay</span>, in which
+ case the event will be fired with an elapsedTime of (-1 *
+ delay).
</dd>
</dl>
</dd>
@@ -1284,7 +1298,10 @@
<b>animationstart</b>
</dt>
<dd>
- The 'animationstart' event occurs at the start of the animation
+ The 'animationstart' event occurs at the start of the animation. If there is an <span
+ class="prop-name">animation-delay</span> then this event will fire once the delay period
+ has expired. A negative delay will cause the event to fire with an elapsedTime equal to
+ the absolute value of the delay.
<ul>
<li>Bubbles: Yes
</li>
@@ -1431,7 +1448,7 @@
attribute DOMString name;
readonly attribute CSSRuleList cssRules;
- void insertRule(in DOMString rule);
+ void appendRule(in DOMString rule);
void deleteRule(in DOMString key);
CSSKeyframeRule findRule(in DOMString key);
};
@@ -1467,11 +1484,11 @@
<dl>
<!-- ======================================================================================================= -->
<dt>
- <code class='method-name'><a id="DOM-CSSKeyframesRule-insertRule" name='DOM-CSSKeyframesRule-insertRule'>insertRule</a></code>
+ <code class='method-name'><a id="DOM-CSSKeyframesRule-appendRule" name='DOM-CSSKeyframesRule-appendRule'>appendRule</a></code>
</dt>
<dd>
<div class='method'>
- The <code>insertRule</code> method inserts the passed CSSKeyframeRule into the list at the passed key.
+ The <code>appendRule</code> method appends the passed CSSKeyframeRule into the list at the passed key.
<div class='parameters'>
<b>Parameters</b>
<div class='paramtable'>
@@ -1480,10 +1497,8 @@
<code class='parameter-name'>rule</code> of type <code>DOMString</code>
</dt>
<dd>
- The rule to be inserted, expressed in the same syntax as one entry in the
- <code>@keyframes</code> rule. The key is included in the rule string, which described the
- point at which the rule should be inserted. If a rule with the same key already exists in
- the list, it is replaced with this rule.
+ The rule to be appended, expressed in the same syntax as one entry in the
+ <code>@keyframes</code> rule.
</dd>
</dl>
</div>
Received on Tuesday, 5 April 2011 19:15:24 UTC