Skip to content

Commit 8836c80

Browse files
dbarondbaron
committed
[css3-transitions][css3-animations] Make it clear that the comma-separated items in the transition and animation shorthands don't themselves contain comma-separated items (which, if you read the grammar literally, they did). Fixes issue raised in http://lists.w3.org/Archives/Public/www-style/2012Sep/0375.html .
1 parent ccfcbb9 commit 8836c80

4 files changed

Lines changed: 266 additions & 171 deletions

File tree

‎css3-animations/Overview.html‎

Lines changed: 105 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,9 @@
1818
<link href="../default.css" rel=stylesheet type="text/css">
1919
<link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet
2020
type="text/css">
21+
<style type="text/css">
22+
div.prod { margin: 1em 2em; }
23+
</style>
2124

2225
<body>
2326
<div class=head> <!--begin-logo-->
@@ -604,7 +607,8 @@ <h3 id=animation-name-property><span class=secno>3.2. </span> The ‘<a
604607
<tr>
605608
<th><a href="#values">Value</a>:
606609

607-
<td>[ none | IDENT ] [, [ none | IDENT ] ]*
610+
<td>&lt;single-animation-name&gt; [ ‘<code class=css>,</code>’
611+
&lt;single-animation-name&gt; ]*
608612

609613
<tr>
610614
<th>Initial:
@@ -647,6 +651,10 @@ <h3 id=animation-name-property><span class=secno>3.2. </span> The ‘<a
647651
<td><abbr title="follows order of property value definition">per
648652
grammar</abbr>
649653
</table>
654+
655+
<div class=prod> <dfn
656+
id=ltsingle-animation-namegt>&lt;single-animation-name&gt;</dfn> = none |
657+
&lt;IDENT&gt;</div>
650658
<!--
651659
<p>
652660
It is possible for elements to have multiple animations running that change the same property or properties. In this case the animations combine in a manner defined by the property. For example, animations on 'opacity' will add together and animations on 'transform' will have their transformation matrices multiplied.
@@ -789,13 +797,8 @@ <h3 id=animation-timing-function-property><span class=secno>3.4. </span>
789797
<tr>
790798
<th><a href="#values">Value</a>:
791799

792-
<td> [ ease | linear | ease-in | ease-out | ease-in-out | step-start |
793-
step-end | steps(&lt;number&gt; [, [ start | end ] ]?) |
794-
cubic-bezier(&lt;number&gt;, &lt;number&gt;, &lt;number&gt;,
795-
&lt;number&gt;) ] [, [ ease | linear | ease-in | ease-out | ease-in-out
796-
| step-start | step-end | steps(&lt;number&gt; [, [ start | end ] ]?) |
797-
cubic-bezier(&lt;number&gt;, &lt;number&gt;, &lt;number&gt;,
798-
&lt;number&gt;) ] ]*
800+
<td>&lt;single-animation-timing-function&gt; [ ‘<code
801+
class=css>,</code>’ &lt;single-animation-timing-function&gt; ]*
799802

800803
<tr>
801804
<th>Initial:
@@ -839,6 +842,13 @@ <h3 id=animation-timing-function-property><span class=secno>3.4. </span>
839842
grammar</abbr>
840843
</table>
841844

845+
<div class=prod> <dfn
846+
id=ltsingle-animation-timing-functiongt>&lt;single-animation-timing-function&gt;</dfn>
847+
= ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end
848+
| steps(&lt;number&gt; [, [ start | end ] ]?) |
849+
cubic-bezier(&lt;number&gt;, &lt;number&gt;, &lt;number&gt;,
850+
&lt;number&gt;)</div>
851+
842852
<p> For a keyframed animation, the ‘<a
843853
href="#animation-timing-function"><code
844854
class=property>animation-timing-function</code></a>’ applies between
@@ -879,7 +889,8 @@ <h3 id=animation-iteration-count-property><span class=secno>3.5. </span>
879889
<tr>
880890
<th><a href="#values">Value</a>:
881891

882-
<td> [ infinite | &lt;number&gt; ] [, [ infinite | &lt;number&gt; ] ]*
892+
<td>&lt;single-animation-iteration-count&gt; [ ‘<code
893+
class=css>,</code>’ &lt;single-animation-iteration-count&gt; ]*
883894

884895
<tr>
885896
<th>Initial:
@@ -923,6 +934,10 @@ <h3 id=animation-iteration-count-property><span class=secno>3.5. </span>
923934
grammar</abbr>
924935
</table>
925936

937+
<div class=prod> <dfn
938+
id=ltsingle-animation-iteration-countgt>&lt;single-animation-iteration-count&gt;</dfn>
939+
= infinite | &lt;number&gt;</div>
940+
926941
<h3 id=animation-direction-property><span class=secno>3.6. </span> The
927942
‘<a href="#animation-direction"><code
928943
class=property>animation-direction</code></a>’ Property</h3>
@@ -944,8 +959,8 @@ <h3 id=animation-direction-property><span class=secno>3.6. </span> The
944959
<tr>
945960
<th><a href="#values">Value</a>:
946961

947-
<td> [ normal | reverse | alternate | alternate-reverse ] [, [ normal |
948-
reverse | alternate | alternate-reverse ] ]*
962+
<td>&lt;single-animation-direction&gt; [ ‘<code class=css>,</code>’
963+
&lt;single-animation-direction&gt; ]*
949964

950965
<tr>
951966
<th>Initial:
@@ -989,6 +1004,10 @@ <h3 id=animation-direction-property><span class=secno>3.6. </span> The
9891004
grammar</abbr>
9901005
</table>
9911006

1007+
<div class=prod> <dfn
1008+
id=ltsingle-animation-directiongt>&lt;single-animation-direction&gt;</dfn>
1009+
= normal | reverse | alternate | alternate-reverse</div>
1010+
9921011
<dl>
9931012
<dt><dfn id=normal>normal</dfn>
9941013

@@ -1040,7 +1059,8 @@ <h3 id=animation-play-state-property><span class=secno>3.7. </span> The
10401059
<tr>
10411060
<th><a href="#values">Value</a>:
10421061

1043-
<td> [ running | paused ] [, [ running | paused ] ]*
1062+
<td>&lt;single-animation-play-state&gt; [ ‘<code class=css>,</code>’
1063+
&lt;single-animation-play-state&gt; ]*
10441064

10451065
<tr>
10461066
<th>Initial:
@@ -1084,6 +1104,10 @@ <h3 id=animation-play-state-property><span class=secno>3.7. </span> The
10841104
grammar</abbr>
10851105
</table>
10861106

1107+
<div class=prod> <dfn
1108+
id=ltsingle-animation-play-stategt>&lt;single-animation-play-state&gt;</dfn>
1109+
= running | paused</div>
1110+
10871111
<h3 id=animation-delay-property><span class=secno>3.8. </span> The ‘<a
10881112
href="#animation-delay"><code class=property>animation-delay</code></a>’
10891113
Property</h3>
@@ -1236,8 +1260,8 @@ <h3 id=animation-fill-mode-property><span class=secno>3.9. </span> The
12361260
<tr>
12371261
<th><a href="#values">Value</a>:
12381262

1239-
<td> [ none | forwards | backwards | both ] [, [ none | forwards |
1240-
backwards | both ] ]*
1263+
<td>&lt;single-animation-fill-mode&gt; [ ‘<code class=css>,</code>’
1264+
&lt;single-animation-fill-mode&gt; ]*
12411265

12421266
<tr>
12431267
<th>Initial:
@@ -1281,6 +1305,10 @@ <h3 id=animation-fill-mode-property><span class=secno>3.9. </span> The
12811305
grammar</abbr>
12821306
</table>
12831307

1308+
<div class=prod> <dfn
1309+
id=ltsingle-animation-fill-modegt>&lt;single-animation-fill-mode&gt;</dfn>
1310+
= none | forwards | backwards | both</div>
1311+
12841312
<h3 id=animation-shorthand-property><span class=secno>3.10. </span> The
12851313
‘<a href="#animation"><code class=property>animation</code></a>’
12861314
Shorthand Property</h3>
@@ -1289,18 +1317,6 @@ <h3 id=animation-shorthand-property><span class=secno>3.10. </span> The
12891317
class=property>animation</code></a>’ shorthand property combines seven
12901318
of the animation properties into a single property.
12911319

1292-
<p> Note that order is important in this property. The first value that can
1293-
be parsed as a <var>&lt;time></var> is assigned to the ‘<a
1294-
href="#animation-duration"><code
1295-
class=property>animation-duration</code></a>’. The second value that can
1296-
be parsed as a <var>&lt;time></var> is assigned to ‘<a
1297-
href="#animation-delay"><code
1298-
class=property>animation-delay</code></a>’.
1299-
1300-
<p class=issue> An alternative proposal is to accept the font shorthand
1301-
approach of using a "/" character between the values of the same type.
1302-
e.g. 2s/4s would mean a duration of 2 seconds and a delay of 4 seconds.
1303-
13041320
<table class=propdef>
13051321
<tbody>
13061322
<tr>
@@ -1311,13 +1327,8 @@ <h3 id=animation-shorthand-property><span class=secno>3.10. </span> The
13111327
<tr>
13121328
<th><a href="#values">Value</a>:
13131329

1314-
<td> [ &lt;animation-name&gt; || &lt;animation-duration&gt; ||
1315-
&lt;animation-timing-function&gt; || &lt;animation-delay&gt; ||
1316-
&lt;animation-iteration-count&gt; || &lt;animation-direction&gt; ||
1317-
&lt;animation-fill-mode&gt; ] [, [ &lt;animation-name&gt; ||
1318-
&lt;animation-duration&gt; || &lt;animation-timing-function&gt; ||
1319-
&lt;animation-delay&gt; || &lt;animation-iteration-count&gt; ||
1320-
&lt;animation-direction&gt; || &lt;animation-fill-mode&gt; ] ]*
1330+
<td>&lt;single-animation&gt; [ ‘<code class=css>,</code>’
1331+
&lt;single-animation&gt; ]*
13211332

13221333
<tr>
13231334
<th>Initial:
@@ -1361,6 +1372,26 @@ <h3 id=animation-shorthand-property><span class=secno>3.10. </span> The
13611372
grammar</abbr>
13621373
</table>
13631374

1375+
<div class=prod> <dfn
1376+
id=ltsingle-animationgt>&lt;single-animation&gt;</dfn> =
1377+
&lt;single-animation-name&gt; || &lt;time&gt; ||
1378+
&lt;single-animation-timing-function&gt; || &lt;time&gt; ||
1379+
&lt;single-animation-iteration-count&gt; ||
1380+
&lt;single-animation-direction&gt; || &lt;single-animation-fill-mode&gt;</div>
1381+
1382+
<p> Note that order is important within the items in this property: the
1383+
first value that can be parsed as a <var>&lt;time&gt;</var> is assigned to
1384+
the transition-duration, and the second value that can be parsed as a
1385+
<var>&lt;time&gt;</var> is assigned to transition-delay.
1386+
1387+
<p class=issue> An alternative proposal is to accept the font shorthand
1388+
approach of using a "/" character between the values of the same type.
1389+
e.g. 2s/4s would mean a duration of 2 seconds and a delay of 4 seconds.
1390+
1391+
<p class=issue> Need to also explain how order is important in terms of
1392+
animation-name versus keywords, and probably also adjust the canonical
1393+
order to match.
1394+
13641395
<h2 id=animation-events><span class=secno>4. </span> Animation Events</h2>
13651396

13661397
<p> Several animation related events are available through the <a
@@ -1678,8 +1709,8 @@ <h4 id=CSSKeyframesRule-findRule><span class=secno>5.3.5. </span> The
16781709

16791710
<h2 id=acknowledgments><span class=secno>6. </span>Acknowledgments</h2>
16801711

1681-
<p>Thanks especially to the feedback from Tab Atkins, Estelle Weyl, and
1682-
all the rest of the <a
1712+
<p>Thanks especially to the feedback from Tab Atkins, Carine Bournez,
1713+
Estelle Weyl, and all the rest of the <a
16831714
href="http://lists.w3.org/Archives/Public/www-style/">www-style</a>
16841715
community.
16851716

@@ -1750,8 +1781,8 @@ <h2 class=no-num id=property-index>Property index</h2>
17501781
<th><a class=property
17511782
href="#animation-direction">animation-direction</a>
17521783

1753-
<td>[ normal | reverse | alternate | alternate-reverse ] [, [ normal |
1754-
reverse | alternate | alternate-reverse ] ]*
1784+
<td>&lt;single-animation-direction&gt; [ ‘,’
1785+
&lt;single-animation-direction&gt; ]*
17551786

17561787
<td>‘normal’
17571788

@@ -1783,8 +1814,8 @@ <h2 class=no-num id=property-index>Property index</h2>
17831814
<th><a class=property
17841815
href="#animation-fill-mode">animation-fill-mode</a>
17851816

1786-
<td>[ none | forwards | backwards | both ] [, [ none | forwards |
1787-
backwards | both ] ]*
1817+
<td>&lt;single-animation-fill-mode&gt; [ ‘,’
1818+
&lt;single-animation-fill-mode&gt; ]*
17881819

17891820
<td>‘none’
17901821

@@ -1800,7 +1831,8 @@ <h2 class=no-num id=property-index>Property index</h2>
18001831
<th><a class=property
18011832
href="#animation-iteration-count">animation-iteration-count</a>
18021833

1803-
<td>[ infinite | &lt;number&gt; ] [, [ infinite | &lt;number&gt; ] ]*
1834+
<td>&lt;single-animation-iteration-count&gt; [ ‘,’
1835+
&lt;single-animation-iteration-count&gt; ]*
18041836

18051837
<td>‘1’
18061838

@@ -1815,7 +1847,8 @@ <h2 class=no-num id=property-index>Property index</h2>
18151847
<tr>
18161848
<th><a class=property href="#animation-name">animation-name</a>
18171849

1818-
<td>[ none | IDENT ] [, [ none | IDENT ] ]*
1850+
<td>&lt;single-animation-name&gt; [ ‘,’
1851+
&lt;single-animation-name&gt; ]*
18191852

18201853
<td>‘none’
18211854

@@ -1831,7 +1864,8 @@ <h2 class=no-num id=property-index>Property index</h2>
18311864
<th><a class=property
18321865
href="#animation-play-state">animation-play-state</a>
18331866

1834-
<td>[ running | paused ] [, [ running | paused ] ]*
1867+
<td>&lt;single-animation-play-state&gt; [ ‘,’
1868+
&lt;single-animation-play-state&gt; ]*
18351869

18361870
<td>‘running’
18371871

@@ -1846,13 +1880,7 @@ <h2 class=no-num id=property-index>Property index</h2>
18461880
<tr>
18471881
<th><a class=property href="#animation">animation</a>
18481882

1849-
<td>[ &lt;animation-name&gt; || &lt;animation-duration&gt; ||
1850-
&lt;animation-timing-function&gt; || &lt;animation-delay&gt; ||
1851-
&lt;animation-iteration-count&gt; || &lt;animation-direction&gt; ||
1852-
&lt;animation-fill-mode&gt; ] [, [ &lt;animation-name&gt; ||
1853-
&lt;animation-duration&gt; || &lt;animation-timing-function&gt; ||
1854-
&lt;animation-delay&gt; || &lt;animation-iteration-count&gt; ||
1855-
&lt;animation-direction&gt; || &lt;animation-fill-mode&gt; ] ]*
1883+
<td>&lt;single-animation&gt; [ ‘,’ &lt;single-animation&gt; ]*
18561884

18571885
<td>see individual properties
18581886

@@ -1868,13 +1896,8 @@ <h2 class=no-num id=property-index>Property index</h2>
18681896
<th><a class=property
18691897
href="#animation-timing-function">animation-timing-function</a>
18701898

1871-
<td>[ ease | linear | ease-in | ease-out | ease-in-out | step-start |
1872-
step-end | steps(&lt;number&gt; [, [ start | end ] ]?) |
1873-
cubic-bezier(&lt;number&gt;, &lt;number&gt;, &lt;number&gt;,
1874-
&lt;number&gt;) ] [, [ ease | linear | ease-in | ease-out |
1875-
ease-in-out | step-start | step-end | steps(&lt;number&gt; [, [ start
1876-
| end ] ]?) | cubic-bezier(&lt;number&gt;, &lt;number&gt;,
1877-
&lt;number&gt;, &lt;number&gt;) ] ]*
1899+
<td>&lt;single-animation-timing-function&gt; [ ‘,’
1900+
&lt;single-animation-timing-function&gt; ]*
18781901

18791902
<td>‘ease’
18801903

@@ -1980,6 +2003,32 @@ <h2 class=no-num id=index>Index</h2>
19802003

19812004
<li>reverse, <a href="#reverse" title=reverse><strong>3.6.</strong></a>
19822005

2006+
<li>&lt;single-animation&gt;, <a href="#ltsingle-animationgt"
2007+
title="&lt;single-animation&gt;"><strong>3.10.</strong></a>
2008+
2009+
<li>&lt;single-animation-direction&gt;, <a
2010+
href="#ltsingle-animation-directiongt"
2011+
title="&lt;single-animation-direction&gt;"><strong>3.6.</strong></a>
2012+
2013+
<li>&lt;single-animation-fill-mode&gt;, <a
2014+
href="#ltsingle-animation-fill-modegt"
2015+
title="&lt;single-animation-fill-mode&gt;"><strong>3.9.</strong></a>
2016+
2017+
<li>&lt;single-animation-iteration-count&gt;, <a
2018+
href="#ltsingle-animation-iteration-countgt"
2019+
title="&lt;single-animation-iteration-count&gt;"><strong>3.5.</strong></a>
2020+
2021+
<li>&lt;single-animation-name&gt;, <a href="#ltsingle-animation-namegt"
2022+
title="&lt;single-animation-name&gt;"><strong>3.2.</strong></a>
2023+
2024+
<li>&lt;single-animation-play-state&gt;, <a
2025+
href="#ltsingle-animation-play-stategt"
2026+
title="&lt;single-animation-play-state&gt;"><strong>3.7.</strong></a>
2027+
2028+
<li>&lt;single-animation-timing-function&gt;, <a
2029+
href="#ltsingle-animation-timing-functiongt"
2030+
title="&lt;single-animation-timing-function&gt;"><strong>3.4.</strong></a>
2031+
19832032
<li>style, <a href="#CSSKeyframeRule-style"
19842033
title=style><strong>5.2.2.</strong></a>
19852034
</ul>

0 commit comments

Comments
 (0)