W3C home > Mailing lists > Public > public-css-commits@w3.org > April 2011

csswg/css3-animations ChangeLog,1.5,1.6 Overview.html,1.7,1.8 Overview.src.html,1.8,1.9

From: Dean Jackson via cvs-syncmail <cvsmail@w3.org>
Date: Tue, 05 Apr 2011 19:15:22 +0000
To: public-css-commits@w3.org
Message-Id: <E1Q7Bik-00071k-2k@lionel-hutz.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 &lsquo;<code class=property>none</code>&rsquo; 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>&lsquo;<a href="#animation-name"><code
+   class=property>animation-name</code></a>&rsquo;</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 &lsquo;<code class=property>animationstart</code>&rsquo; 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 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Tuesday, 5 April 2011 19:15:25 GMT