Skip to content

Commit 60c2b27

Browse files
author
cmarrin
committed
Minor clarifying edits and removed the issue that we are thinking of removing play-state. By popular demand it is staying in
1 parent 7eb690f commit 60c2b27

2 files changed

Lines changed: 67 additions & 77 deletions

File tree

‎css3-animations/Overview.html‎

Lines changed: 65 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -29,14 +29,14 @@
2929

3030
<h1>CSS Animations Module Level 3</h1>
3131

32-
<h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 14 April 2009</h2>
32+
<h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 10 March 2010</h2>
3333

3434
<dl>
3535
<dt>This version:
3636

3737
<dd><a
38-
href="http://www.w3.org/TR/2009/ED-css3-animations-20090414">http://dev.w3.org/csswg/css3-animations/</a>
39-
<!--http://www.w3.org/TR/2009/WD-css3-animations-20090414-->
38+
href="http://www.w3.org/TR/2010/ED-css3-animations-20100310">http://dev.w3.org/csswg/css3-animations/</a>
39+
<!--http://www.w3.org/TR/2010/WD-css3-animations-20100310-->
4040

4141
<dt>Latest version:
4242

@@ -63,13 +63,13 @@ <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 14 April 2009</h2>
6363
<!--begin-copyright-->
6464
<p class=copyright><a
6565
href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
66-
rel=license>Copyright</a> &copy; 2009 <a
66+
rel=license>Copyright</a> &copy; 2010 <a
6767
href="http://www.w3.org/"><acronym title="World Wide Web
6868
Consortium">W3C</acronym></a><sup>&reg;</sup> (<a
6969
href="http://www.csail.mit.edu/"><acronym title="Massachusetts Institute
70-
of Technology">MIT</acronym></a>, <a
71-
href="http://www.ercim.org/"><acronym title="European Research Consortium
72-
for Informatics and Mathematics">ERCIM</acronym></a>, <a
70+
of Technology">MIT</acronym></a>, <a href="http://www.ercim.eu/"><acronym
71+
title="European Research Consortium for Informatics and
72+
Mathematics">ERCIM</acronym></a>, <a
7373
href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a
7474
href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
7575
<a
@@ -95,10 +95,12 @@ <h2 class="no-num no-toc" id=status>Status of this document</h2>
9595

9696
<p>The (<a
9797
href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public
98-
mailing list <a href="mailto:www-style@w3.org">www-style@w3.org</a> (see
99-
<a href="http://www.w3.org/Mail/Request">instructions</a>) is preferred
100-
for discussion of this specification. When sending e-mail, please put the
101-
text &#8220;css3-animations&#8221; in the subject, preferably like this:
98+
mailing list <a
99+
href="mailto:www-style@w3.org?Subject=%5Bcss3-animations%5D%20PUT%20SUBJECT%20HERE">
100+
www-style@w3.org</a> (see <a
101+
href="http://www.w3.org/Mail/Request">instructions</a>) is preferred for
102+
discussion of this specification. When sending e-mail, please put the text
103+
&#8220;css3-animations&#8221; in the subject, preferably like this:
102104
&#8220;[<!---->css3-animations<!---->] <em>&hellip;summary of
103105
comment&hellip;</em>&#8221;
104106

@@ -122,61 +124,61 @@ <h2 class="no-num no-toc" id=contents>Table of contents</h2>
122124
<!--begin-toc-->
123125

124126
<ul class=toc>
125-
<li><a href="#introduction"><span class=secno>1 </span>Introduction</a>
127+
<li><a href="#introduction"><span class=secno>1. </span>Introduction</a>
126128

127-
<li><a href="#keyframes-"><span class=secno>2 </span> Keyframes </a>
129+
<li><a href="#keyframes-"><span class=secno>2. </span> Keyframes </a>
128130
<ul class=toc>
129-
<li><a href="#timing-functions-for-keyframes-"><span class=secno>2.1
131+
<li><a href="#timing-functions-for-keyframes-"><span class=secno>2.1.
130132
</span> Timing functions for keyframes </a>
131133
</ul>
132134

133-
<li><a href="#animations-"><span class=secno>3 </span> Animations </a>
135+
<li><a href="#animations-"><span class=secno>3. </span> Animations </a>
134136
<ul class=toc>
135-
<li><a href="#animation-behavior-"><span class=secno>3.1 </span>
137+
<li><a href="#animation-behavior-"><span class=secno>3.1. </span>
136138
Animation behavior </a>
137139

138-
<li><a href="#the-animation-name-property-"><span class=secno>3.2
140+
<li><a href="#the-animation-name-property-"><span class=secno>3.2.
139141
</span> The <span class=prop-name>&lsquo;<code
140142
class=property>animation-name</code>&rsquo;</span> Property </a>
141143

142-
<li><a href="#the-animation-duration-property-"><span class=secno>3.3
144+
<li><a href="#the-animation-duration-property-"><span class=secno>3.3.
143145
</span> The <span class=prop-name>&lsquo;<code
144146
class=property>animation-duration</code>&rsquo;</span> Property </a>
145147

146-
<li><a href="#animation-timing-function_tag"><span class=secno>3.4
148+
<li><a href="#animation-timing-function_tag"><span class=secno>3.4.
147149
</span> The <span class=prop-name>&lsquo;<code
148150
class=property>animation-timing-function</code>&rsquo;</span> Property
149151
</a>
150152

151153
<li><a href="#the-animation-iteration-count-property-"><span
152-
class=secno>3.5 </span> The <span class=prop-name>&lsquo;<code
154+
class=secno>3.5. </span> The <span class=prop-name>&lsquo;<code
153155
class=property>animation-iteration-count</code>&rsquo;</span> Property
154156
</a>
155157

156-
<li><a href="#the-animation-direction-property-"><span class=secno>3.6
158+
<li><a href="#the-animation-direction-property-"><span class=secno>3.6.
157159
</span> The <span class=prop-name>&lsquo;<code
158160
class=property>animation-direction</code>&rsquo;</span> Property </a>
159161

160-
<li><a href="#the-animation-play-state-property-"><span class=secno>3.7
162+
<li><a href="#the-animation-play-state-property-"><span class=secno>3.7.
161163
</span> The <span class=prop-name>&lsquo;<code
162164
class=property>animation-play-state</code>&rsquo;</span> Property </a>
163165

164-
<li><a href="#the-animation-delay-property-"><span class=secno>3.8
166+
<li><a href="#the-animation-delay-property-"><span class=secno>3.8.
165167
</span> The <span class=prop-name>&lsquo;<code
166168
class=property>animation-delay</code>&rsquo;</span> Property </a>
167169

168-
<li><a href="#the-animation-shorthand-property-"><span class=secno>3.9
170+
<li><a href="#the-animation-shorthand-property-"><span class=secno>3.9.
169171
</span> The <span class=prop-name>&lsquo;<code
170172
class=property>animation</code>&rsquo;</span> Shorthand Property </a>
171173
</ul>
172174

173-
<li><a href="#animation-events-"><span class=secno>4 </span> Animation
175+
<li><a href="#animation-events-"><span class=secno>4. </span> Animation
174176
Events </a>
175177

176-
<li><a href="#dom-interfaces-"><span class=secno>5 </span> DOM Interfaces
178+
<li><a href="#dom-interfaces-"><span class=secno>5. </span> DOM Interfaces
177179
</a>
178180

179-
<li><a href="#references"><span class=secno>6 </span>References</a>
181+
<li><a href="#references"><span class=secno>6. </span>References</a>
180182
<ul class=toc>
181183
<li class=no-num><a href="#normative-references">Normative
182184
references</a>
@@ -190,7 +192,7 @@ <h2 class="no-num no-toc" id=contents>Table of contents</h2>
190192
</ul>
191193
<!--end-toc-->
192194

193-
<h2 id=introduction><span class=secno>1 </span>Introduction</h2>
195+
<h2 id=introduction><span class=secno>1. </span>Introduction</h2>
194196

195197
<p><em>This section is not normative.</em>
196198

@@ -205,7 +207,7 @@ <h2 id=introduction><span class=secno>1 </span>Introduction</h2>
205207
href="#CSS3-TRANSITIONS"
206208
rel=biblioentry>[CSS3-TRANSITIONS]<!--{{!CSS3-TRANSITIONS}}--></a>.
207209

208-
<h2 id=keyframes-><span class=secno>2 </span> Keyframes</h2>
210+
<h2 id=keyframes-><span class=secno>2. </span> Keyframes</h2>
209211

210212
<p> In a simple transition, since both the starting value and ending value
211213
are known, a single timing function and duration determine the
@@ -227,7 +229,7 @@ <h2 id=keyframes-><span class=secno>2 </span> Keyframes</h2>
227229
percentage along the duration of the animation that the keyframe
228230
represents. The keyframe itself is specified by the block of property
229231
values declared on the selector. The keyword &lsquo;<code
230-
class=property>from</code>&rsquo; is equivalent to the value 0. The
232+
class=property>from</code>&rsquo; is equivalent to the value 0%. The
231233
keyword &lsquo;<code class=property>to</code>&rsquo; is equivalent to the
232234
value 100%. Note that the percentage unit specifier must be used on
233235
percentage values. Therefore, "0" is an invalid keyframe selector.
@@ -310,8 +312,8 @@ <h2 id=keyframes-><span class=secno>2 </span> Keyframes</h2>
310312
</pre>
311313
<!-- ======================================================================================================= -->
312314

313-
<h3 id=timing-functions-for-keyframes-><span class=secno>2.1 </span> Timing
314-
functions for keyframes</h3>
315+
<h3 id=timing-functions-for-keyframes-><span class=secno>2.1. </span>
316+
Timing functions for keyframes</h3>
315317

316318
<p> A keyframe style rule may also declare the timing function that is to
317319
be used as the animation moves to the next keyframe.
@@ -356,15 +358,16 @@ <h3 id=timing-functions-for-keyframes-><span class=secno>2.1 </span> Timing
356358
appear as an element that moves up the page 50px, slowing down as it
357359
reaches its highest point then speeding up as it falls back to 100px. The
358360
second half of the animation behaves in a similar manner, but only moves
359-
the element 25px units up the page.</div>
361+
the element 25px units up the page. A timing function specified on the
362+
"to" or 100% keyframe is ignored</div>
360363

361364
<p> See <a href="#animation-timing-function_tag">the <span
362365
class=prop-name>&lsquo;<code
363366
class=property>animation-timing-function</code>&rsquo;</span> property</a>
364367
for more information.</p>
365368
<!-- ======================================================================================================= -->
366369

367-
<h2 id=animations-><span class=secno>3 </span> Animations</h2>
370+
<h2 id=animations-><span class=secno>3. </span> Animations</h2>
368371

369372
<p> Animations are similar to transitions in that they change the
370373
presentational value of CSS properties over time. The principal difference
@@ -409,8 +412,8 @@ <h2 id=animations-><span class=secno>3 </span> Animations</h2>
409412
total of ten iterations).</div>
410413
<!-- ======================================================================================================= -->
411414

412-
<h3 id=animation-behavior-><span class=secno>3.1 </span> Animation behavior
413-
</h3>
415+
<h3 id=animation-behavior-><span class=secno>3.1. </span> Animation
416+
behavior</h3>
414417

415418
<p> CSS Animations affect computed property values. During the execution of
416419
an animation, the computed value for a property is controlled by the
@@ -464,8 +467,8 @@ <h3 id=animation-behavior-><span class=secno>3.1 </span> Animation behavior
464467
removed then reapplied.</p>
465468
<!-- ======================================================================================================= -->
466469

467-
<h3 id=the-animation-name-property-><span class=secno>3.2 </span> The <span
468-
class=prop-name>&lsquo;<code class=property><a
470+
<h3 id=the-animation-name-property-><span class=secno>3.2. </span> The
471+
<span class=prop-name>&lsquo;<code class=property><a
469472
href="#animation-name">animation-name</a></code>&rsquo;</span> Property</h3>
470473

471474
<p> The <span class=prop-name>&lsquo;<code class=property><a
@@ -567,7 +570,7 @@ <h3 id=the-animation-name-property-><span class=secno>3.2 </span> The <span
567570
-->
568571
<!-- ======================================================================================================= -->
569572

570-
<h3 id=the-animation-duration-property-><span class=secno>3.3 </span> The
573+
<h3 id=the-animation-duration-property-><span class=secno>3.3. </span> The
571574
<span class=prop-name>&lsquo;<code class=property><a
572575
href="#animation-duration">animation-duration</a></code>&rsquo;</span>
573576
Property</h3>
@@ -627,7 +630,7 @@ <h3 id=the-animation-duration-property-><span class=secno>3.3 </span> The
627630
&lsquo;<code class=css>0</code>&rsquo;.</p>
628631
<!-- ======================================================================================================= -->
629632

630-
<h3 id="animation-timing-function_tag"><span class=secno>3.4 </span> The
633+
<h3 id="animation-timing-function_tag"><span class=secno>3.4. </span> The
631634
<span class=prop-name>&lsquo;<code class=property><a
632635
href="#animation-timing-function">animation-timing-function</a></code>&rsquo;</span>
633636
Property</h3>
@@ -700,7 +703,7 @@ <h3 id="animation-timing-function_tag"><span class=secno>3.4 </span> The
700703
timing function specified for the animation is used.</p>
701704
<!-- ======================================================================================================= -->
702705

703-
<h3 id=the-animation-iteration-count-property-><span class=secno>3.5
706+
<h3 id=the-animation-iteration-count-property-><span class=secno>3.5.
704707
</span> The <span class=prop-name>&lsquo;<code class=property><a
705708
href="#animation-iteration-count">animation-iteration-count</a></code>&rsquo;</span>
706709
Property</h3>
@@ -766,7 +769,7 @@ <h3 id=the-animation-iteration-count-property-><span class=secno>3.5
766769
</table>
767770
<!-- ======================================================================================================= -->
768771

769-
<h3 id=the-animation-direction-property-><span class=secno>3.6 </span> The
772+
<h3 id=the-animation-direction-property-><span class=secno>3.6. </span> The
770773
<span class=prop-name>&lsquo;<code class=property><a
771774
href="#animation-direction">animation-direction</a></code>&rsquo;</span>
772775
Property</h3>
@@ -826,18 +829,11 @@ <h3 id=the-animation-direction-property-><span class=secno>3.6 </span> The
826829
</table>
827830
<!-- ======================================================================================================= -->
828831

829-
<h3 id=the-animation-play-state-property-><span class=secno>3.7 </span> The
830-
<span class=prop-name>&lsquo;<code class=property><a
832+
<h3 id=the-animation-play-state-property-><span class=secno>3.7. </span>
833+
The <span class=prop-name>&lsquo;<code class=property><a
831834
href="#animation-play-state">animation-play-state</a></code>&rsquo;</span>
832835
Property</h3>
833836

834-
<div class=issue> We are considering removing &lsquo;<code
835-
class=property><a
836-
href="#animation-play-state">animation-play-state</a></code>&rsquo; since
837-
its behaviour can be replicated using other techniques. For example, by
838-
querying the computed style, removing the animation and then setting
839-
style.</div>
840-
841837
<p> The <span class=prop-name>&lsquo;<code class=property><a
842838
href="#animation-play-state">animation-play-state</a></code>&rsquo;</span>
843839
property defines whether the animation is running or paused. A running
@@ -894,7 +890,7 @@ <h3 id=the-animation-play-state-property-><span class=secno>3.7 </span> The
894890
</table>
895891
<!-- ======================================================================================================= -->
896892

897-
<h3 id=the-animation-delay-property-><span class=secno>3.8 </span> The
893+
<h3 id=the-animation-delay-property-><span class=secno>3.8. </span> The
898894
<span class=prop-name>&lsquo;<code class=property><a
899895
href="#animation-trigger">animation-delay</a></code>&rsquo;</span>
900896
Property</h3>
@@ -964,7 +960,7 @@ <h3 id=the-animation-delay-property-><span class=secno>3.8 </span> The
964960
</table>
965961
<!-- ======================================================================================================= -->
966962

967-
<h3 id=the-animation-shorthand-property-><span class=secno>3.9 </span> The
963+
<h3 id=the-animation-shorthand-property-><span class=secno>3.9. </span> The
968964
<span class=prop-name>&lsquo;<code class=property><a
969965
href="#animation">animation</a></code>&rsquo;</span> Shorthand Property</h3>
970966

@@ -1021,7 +1017,7 @@ <h3 id=the-animation-shorthand-property-><span class=secno>3.9 </span> The
10211017
</table>
10221018
<!-- ======================================================================================================= -->
10231019

1024-
<h2 id=animation-events-><span class=secno>4 </span> Animation Events</h2>
1020+
<h2 id=animation-events-><span class=secno>4. </span> Animation Events</h2>
10251021

10261022
<p> Several animation related events are available through the <a
10271023
href="http://www.w3.org/TR/DOM-Level-2-Events/events.html">DOM Event
@@ -1205,7 +1201,7 @@ <h2 id=animation-events-><span class=secno>4 </span> Animation Events</h2>
12051201
</dl>
12061202
<!-- ======================================================================================================= -->
12071203

1208-
<h2 id=dom-interfaces-><span class=secno>5 </span> DOM Interfaces</h2>
1204+
<h2 id=dom-interfaces-><span class=secno>5. </span> DOM Interfaces</h2>
12091205

12101206
<p> CSS animation is exposed to the CSSOM through a pair of new interfaces
12111207
describing the keyframes.
@@ -1431,7 +1427,7 @@ <h2 id=dom-interfaces-><span class=secno>5 </span> DOM Interfaces</h2>
14311427
</dl>
14321428
</dl>
14331429

1434-
<h2 id=references><span class=secno>6 </span>References</h2>
1430+
<h2 id=references><span class=secno>6. </span>References</h2>
14351431

14361432
<h3 class=no-num id=normative-references>Normative references</h3>
14371433
<!--begin-normative-->
@@ -1443,11 +1439,11 @@ <h3 class=no-num id=normative-references>Normative references</h3>
14431439

14441440
<dt id=CSS3-TRANSITIONS>[CSS3-TRANSITIONS]
14451441

1446-
<dd>Dean Jackson; David Hyatt; Chris Marrin. <a
1447-
href="http://www.w3.org/TR/2009/WD-css3-transitions-20090320"><cite>CSS
1448-
Transitions Module Level 3.</cite></a> 20 March 2009. W3C Working Draft.
1449-
(Work in progress.) URL: <a
1450-
href="http://www.w3.org/TR/2009/WD-css3-transitions-20090320">http://www.w3.org/TR/2009/WD-css3-transitions-20090320</a>
1442+
<dd>Dean Jackson; et al. <a
1443+
href="http://www.w3.org/TR/2009/WD-css3-transitions-20091201"><cite>CSS
1444+
Transitions Module Level 3.</cite></a> 1 December 2009. W3C Working
1445+
Draft. (Work in progress.) URL: <a
1446+
href="http://www.w3.org/TR/2009/WD-css3-transitions-20091201">http://www.w3.org/TR/2009/WD-css3-transitions-20091201</a>
14511447
</dd>
14521448
<!---->
14531449
</dl>
@@ -1624,28 +1620,28 @@ <h2 class=no-num id=index>Index</h2>
16241620

16251621
<ul class=indexlist>
16261622
<li>animation, <a href="#animation"
1627-
title=animation><strong>3.9</strong></a>
1623+
title=animation><strong>3.9.</strong></a>
16281624

16291625
<li>animation-delay, <a href="#animation-trigger"
1630-
title=animation-delay><strong>3.8</strong></a>
1626+
title=animation-delay><strong>3.8.</strong></a>
16311627

16321628
<li>animation-direction, <a href="#animation-direction"
1633-
title=animation-direction><strong>3.6</strong></a>
1629+
title=animation-direction><strong>3.6.</strong></a>
16341630

16351631
<li>animation-duration, <a href="#animation-duration"
1636-
title=animation-duration><strong>3.3</strong></a>
1632+
title=animation-duration><strong>3.3.</strong></a>
16371633

16381634
<li>animation-iteration-count, <a href="#animation-iteration-count"
1639-
title=animation-iteration-count><strong>3.5</strong></a>
1635+
title=animation-iteration-count><strong>3.5.</strong></a>
16401636

16411637
<li>animation-name, <a href="#animation-name"
1642-
title=animation-name><strong>3.2</strong></a>
1638+
title=animation-name><strong>3.2.</strong></a>
16431639

16441640
<li>animation-play-state, <a href="#animation-play-state"
1645-
title=animation-play-state><strong>3.7</strong></a>
1641+
title=animation-play-state><strong>3.7.</strong></a>
16461642

16471643
<li>animation-timing-function, <a href="#animation-timing-function"
1648-
title=animation-timing-function><strong>3.4</strong></a>
1644+
title=animation-timing-function><strong>3.4.</strong></a>
16491645
</ul>
16501646
<!--end-index-->
16511647
</html>

0 commit comments

Comments
 (0)