Fix the definition of 'animation-fill-mode' as described in http://lists.w3.org/Archives/Public/www-style/2012Jun/0447.html .

Thu, 28 Jun 2012 11:44:32 -0700

author
L. David Baron <dbaron@dbaron.org>
date
Thu, 28 Jun 2012 11:44:32 -0700
changeset 6083
341cb156c7cd
parent 6082
1d5f04cd856a
child 6084
350be88481cf

Fix the definition of 'animation-fill-mode' as described in http://lists.w3.org/Archives/Public/www-style/2012Jun/0447.html .

1. account for 'reverse' and 'alternate-reverse' animation directions

2. account for the possibility that 'animation-iteration-count' is not an integer

css3-animations/Overview.html file | annotate | diff | comparison | revisions
css3-animations/Overview.src.html file | annotate | diff | comparison | revisions
     1.1 --- a/css3-animations/Overview.html	Thu Jun 28 11:43:37 2012 -0700
     1.2 +++ b/css3-animations/Overview.html	Thu Jun 28 11:44:32 2012 -0700
     1.3 @@ -1127,23 +1127,38 @@
     1.4    <p> If the value for ‘<a href="#animation-fill-mode"><code
     1.5     class=property>animation-fill-mode</code></a>’ is ‘<code
     1.6     class=css>backwards</code>’, then the animation will apply the property
     1.7 -   values defined in its 0% or ‘<code class=property>from</code>’
     1.8 -   keyframe as soon as the animation is applied, during the period defined by
     1.9 -   ‘<code class=property>animation-delay</code>’.
    1.10 +   values defined in the keyframe that will start the first iteration of the
    1.11 +   animation, during the period defined by ‘<code
    1.12 +   class=property>animation-delay</code>’. These are either the values of
    1.13 +   the ‘<code class=css>from</code>’ keyframe (when ‘<a
    1.14 +   href="#animation-direction"><code
    1.15 +   class=property>animation-direction</code></a>’ is ‘<a
    1.16 +   href="#normal"><code class=css>normal</code></a>’ or ‘<a
    1.17 +   href="#alternate"><code class=css>alternate</code></a>’) or those of the
    1.18 +   ‘<code class=css>to</code>’ keyframe (when ‘<a
    1.19 +   href="#animation-direction"><code
    1.20 +   class=property>animation-direction</code></a>’ is ‘<a
    1.21 +   href="#reverse"><code class=css>reverse</code></a>’ or ‘<a
    1.22 +   href="#alternate-reverse"><code
    1.23 +   class=css>alternate-reverse</code></a>’).
    1.24  
    1.25    <p> If the value for ‘<a href="#animation-fill-mode"><code
    1.26     class=property>animation-fill-mode</code></a>’ is ‘<code
    1.27 -   class=css>forwards</code>’, then the animation will apply the property
    1.28 -   values defined in its last executing keyframe after the final iteration of
    1.29 -   the animation, until the animation style is removed. The last executing
    1.30 -   keyframe is the ‘<code class=property>to</code>’ or ‘<code
    1.31 -   class=css>100%</code>’ keyframe, unless the animation has ‘<a
    1.32 -   href="#animation-direction"><code
    1.33 -   class=property>animation-direction</code></a>’ set to ‘<a
    1.34 -   href="#alternate"><code class=css>alternate</code></a>’ and both a
    1.35 -   finite and even iteration count, in which case it is the ‘<code
    1.36 -   class=property>from</code>’ or ‘<code class=css>0%</code>’ keyframe.
    1.37 -   
    1.38 +   class=css>forwards</code>’, then after the animation ends (as determined
    1.39 +   by its ‘<a href="#animation-iteration-count"><code
    1.40 +   class=property>animation-iteration-count</code></a>’), the animation
    1.41 +   will apply the property values for the time the animation ended. When
    1.42 +   ‘<a href="#animation-iteration-count"><code
    1.43 +   class=property>animation-iteration-count</code></a>’ is an integer
    1.44 +   greater than zero, the values applied will be those for the end of the
    1.45 +   last completed iteration of the animation (rather than the values for the
    1.46 +   start of the iteration that would be next). When ‘<a
    1.47 +   href="#animation-iteration-count"><code
    1.48 +   class=property>animation-iteration-count</code></a>’ is zero, the values
    1.49 +   applied will be those that would start the first iteration (just as when
    1.50 +   ‘<a href="#animation-fill-mode"><code
    1.51 +   class=property>animation-fill-mode</code></a>’ is ‘<code
    1.52 +   class=css>backwards</code>’).
    1.53  
    1.54    <p> If the value for ‘<a href="#animation-fill-mode"><code
    1.55     class=property>animation-fill-mode</code></a>’ is ‘<code
     2.1 --- a/css3-animations/Overview.src.html	Thu Jun 28 11:43:37 2012 -0700
     2.2 +++ b/css3-animations/Overview.src.html	Thu Jun 28 11:44:32 2012 -0700
     2.3 @@ -827,19 +827,29 @@
     2.4  			
     2.5  	<p>
     2.6  		If the value for 'animation-fill-mode' is ''backwards'', 
     2.7 -		then the animation will apply the property values defined in its 0% or 'from' keyframe 
     2.8 -		as soon as the animation is applied, 
     2.9 +		then the animation will apply
    2.10 +		the property values defined in the keyframe
    2.11 +		that will start the first iteration of the animation,
    2.12  		during the period defined by 'animation-delay'.
    2.13 +		These are either the values of the ''from'' keyframe
    2.14 +		(when 'animation-direction' is ''normal'' or ''alternate'')
    2.15 +		or those of the ''to'' keyframe
    2.16 +		(when 'animation-direction' is ''reverse'' or ''alternate-reverse'').
    2.17  			
    2.18  	<p>
    2.19  		If the value for 'animation-fill-mode' is ''forwards'', 
    2.20 -		then the animation will apply the property values defined in its last executing keyframe 
    2.21 -		after the final iteration of the animation, 
    2.22 -		until the animation style is removed. 
    2.23 -		The last executing keyframe is the 'to' or '100%' keyframe, 
    2.24 -		unless the animation has 'animation-direction' set to ''alternate'' 
    2.25 -		and both a finite and even iteration count, 
    2.26 -		in which case it is the 'from' or '0%' keyframe.
    2.27 +		then after the animation ends
    2.28 +		(as determined by its 'animation-iteration-count'),
    2.29 +		the animation will apply
    2.30 +		the property values for the time the animation ended.
    2.31 +		When 'animation-iteration-count' is an integer greater than zero,
    2.32 +		the values applied will be
    2.33 +		those for the end of the last completed iteration of the animation
    2.34 +		(rather than the values for
    2.35 +		the start of the iteration that would be next).
    2.36 +		When 'animation-iteration-count' is zero,
    2.37 +		the values applied will be those that would start the first iteration
    2.38 +		(just as when 'animation-fill-mode' is ''backwards'').
    2.39  			
    2.40  	<p>
    2.41  		If the value for 'animation-fill-mode' is ''both'', 

mercurial