Skip to content

Commit e29528e

Browse files
dbarondbaron
committed
[css3-transitions] Add Animatable and Canonical Order lines so the preprocessor will run again. I'm not sure why the preprocessor is making me put the Animatable lines before the Percentages lines (which is wrong). I'm also not sure the Canonical Order lines are right.
1 parent e48e46e commit e29528e

2 files changed

Lines changed: 182 additions & 41 deletions

File tree

‎css3-transitions/Overview.html‎

Lines changed: 102 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,21 @@
22
"http://www.w3.org/TR/html4/strict.dtd">
33

44
<html lang=en>
5-
<head>
5+
<head profile="http://dublincore.org/documents/2008/08/04/dc-html/ ">
66
<title>CSS Transitions</title>
7+
8+
<link href="http://purl.org/dc/terms/" rel=schema.DC>
9+
<meta content="CSS Transitions" name=DC.title>
10+
<meta content=text name=DC.type>
11+
<meta content=2012-09-20 name=DC.issued>
12+
<meta content="http://dev.w3.org/csswg/css3-transitions/" name=DC.creator>
13+
<meta content=W3C name=DC.publisher>
14+
<meta content="http://www.w3.org/TR/2012/ED-css3-transitions-20120920/"
15+
name=DC.identifier>
16+
<link href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
17+
rel=DC.rights>
718
<meta content="text/html; charset=utf-8" http-equiv=Content-Type>
819
<link href="../default.css" rel=stylesheet type="text/css">
9-
1020
<style type="text/css">
1121
table.animatable-properties {
1222
border-collapse: collapse;
@@ -17,7 +27,7 @@
1727
}
1828
</style>
1929
<link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet
20-
type="text/css">
30+
type="text/css">
2131

2232
<body>
2333
<div class=head> <!--begin-logo-->
@@ -26,14 +36,15 @@
2636

2737
<h1>CSS Transitions</h1>
2838

29-
<h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 12 July 2012</h2>
39+
<h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 20 September
40+
2012</h2>
3041

3142
<dl>
3243
<dt>This version:
3344

34-
<dd> <a href="http://www.w3.org/TR/2012/ED-css3-transitions-20120712/">
45+
<dd> <a href="http://www.w3.org/TR/2012/ED-css3-transitions-20120920/">
3546
http://dev.w3.org/csswg/css3-transitions/</a>
36-
<!--http://www.w3.org/TR/2012/WD-css3-transitions-20120712/-->
47+
<!--http://www.w3.org/TR/2012/WD-css3-transitions-20120920/-->
3748

3849
<dt>Latest version:
3950

@@ -44,7 +55,6 @@ <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 12 July 2012</h2>
4455

4556
<dd><a
4657
href="http://dev.w3.org/csswg/css3-transitions/">http://dev.w3.org/csswg/css3-transitions/</a>
47-
4858

4959
<dt>Previous version:
5060

@@ -253,7 +263,7 @@ <h2 id=transitions><span class=secno>2. </span><a
253263
properties. For example:
254264

255265
<div class=example>
256-
<p style="display:none"> Example(s):</p>
266+
<p style="display:none"> Example(s):
257267

258268
<pre>
259269
div {
@@ -272,7 +282,7 @@ <h2 id=transitions><span class=secno>2. </span><a
272282
from the same index in all the lists. For example:
273283

274284
<div class=example>
275-
<p style="display:none"> Example(s):</p>
285+
<p style="display:none"> Example(s):
276286

277287
<pre>
278288
div {
@@ -304,7 +314,7 @@ <h2 id=transitions><span class=secno>2. </span><a
304314
class=property>transition-property</code></a>’. </span>
305315

306316
<div class=example>
307-
<p style="display:none"> Example(s):</p>
317+
<p style="display:none"> Example(s):
308318

309319
<pre>
310320
div {
@@ -361,6 +371,11 @@ <h3 id=transition-property-property><span class=secno>2.1. </span><a
361371

362372
<td> no
363373

374+
<tr>
375+
<td> <em>Animatable:</em>
376+
377+
<td> no
378+
364379
<tr>
365380
<td> <em>Percentages:</em>
366381

@@ -375,6 +390,12 @@ <h3 id=transition-property-property><span class=secno>2.1. </span><a
375390
<td> <em>Computed value:</em>
376391

377392
<td> Same as specified value.
393+
394+
<tr>
395+
<td> <em>Canonical order:</em>
396+
397+
<td> <abbr title="follows order of property value definition">per
398+
grammar</abbr>
378399
</table>
379400

380401
<p> A value of ‘<code class=property>none</code>’ means that no
@@ -458,6 +479,11 @@ <h3 id=transition-duration-property><span class=secno>2.2. </span><a
458479

459480
<td> no
460481

482+
<tr>
483+
<td> <em>Animatable:</em>
484+
485+
<td> no
486+
461487
<tr>
462488
<td> <em>Percentages:</em>
463489

@@ -472,6 +498,12 @@ <h3 id=transition-duration-property><span class=secno>2.2. </span><a
472498
<td> <em>Computed value:</em>
473499

474500
<td> Same as specified value.
501+
502+
<tr>
503+
<td> <em>Canonical order:</em>
504+
505+
<td> <abbr title="follows order of property value definition">per
506+
grammar</abbr>
475507
</table>
476508

477509
<p> This property specifies how long the transition from the old value to
@@ -540,7 +572,6 @@ <h3 id=transition-timing-function-property><span class=secno>2.3. </span><a
540572
<td> <em>Name:</em>
541573

542574
<td> <dfn id=transition-timing-function>transition-timing-function</dfn>
543-
544575

545576
<tr>
546577
<td> <em>Value:</em>
@@ -568,6 +599,11 @@ <h3 id=transition-timing-function-property><span class=secno>2.3. </span><a
568599

569600
<td> no
570601

602+
<tr>
603+
<td> <em>Animatable:</em>
604+
605+
<td> no
606+
571607
<tr>
572608
<td> <em>Percentages:</em>
573609

@@ -582,6 +618,12 @@ <h3 id=transition-timing-function-property><span class=secno>2.3. </span><a
582618
<td> <em>Computed value:</em>
583619

584620
<td> Same as specified value.
621+
622+
<tr>
623+
<td> <em>Canonical order:</em>
624+
625+
<td> <abbr title="follows order of property value definition">per
626+
grammar</abbr>
585627
</table>
586628

587629
<p> The timing functions have the following definitions.
@@ -605,7 +647,6 @@ <h3 id=transition-timing-function-property><span class=secno>2.3. </span><a
605647
<dt> ease-out
606648

607649
<dd> The ease-out function is equivalent to cubic-bezier(0, 0, 0.58, 1.0).
608-
609650

610651
<dt> ease-in-out
611652

@@ -694,6 +735,11 @@ <h3 id=transition-delay-property><span class=secno>2.4. </span><a
694735

695736
<td> no
696737

738+
<tr>
739+
<td> <em>Animatable:</em>
740+
741+
<td> no
742+
697743
<tr>
698744
<td> <em>Percentages:</em>
699745

@@ -708,6 +754,12 @@ <h3 id=transition-delay-property><span class=secno>2.4. </span><a
708754
<td> <em>Computed value:</em>
709755

710756
<td> Same as specified value.
757+
758+
<tr>
759+
<td> <em>Canonical order:</em>
760+
761+
<td> <abbr title="follows order of property value definition">per
762+
grammar</abbr>
711763
</table>
712764
<!-- ======================================================================================================= -->
713765

@@ -769,6 +821,11 @@ <h3 id=transition-shorthand-property><span class=secno>2.5. </span><a
769821

770822
<td> no
771823

824+
<tr>
825+
<td> <em>Animatable:</em>
826+
827+
<td> no
828+
772829
<tr>
773830
<td> <em>Percentages:</em>
774831

@@ -783,6 +840,12 @@ <h3 id=transition-shorthand-property><span class=secno>2.5. </span><a
783840
<td> <em>Computed value:</em>
784841

785842
<td> Same as specified value.
843+
844+
<tr>
845+
<td> <em>Canonical order:</em>
846+
847+
<td> <abbr title="follows order of property value definition">per
848+
grammar</abbr>
786849
</table>
787850

788851
<h2 id=starting><span class=secno>3. </span> Starting of transitions</h2>
@@ -800,7 +863,7 @@ <h2 id=starting><span class=secno>3. </span> Starting of transitions</h2>
800863
animatable property would first have its new computed value.
801864

802865
<div class=example id=manual-reversing-example>
803-
<p style="display:none"> Example(s):</p>
866+
<p style="display:none"> Example(s):
804867

805868
<p>This provides a way for authors to specify different values of the
806869
‘<code class=css>transition-*</code>’ properties for the
@@ -818,7 +881,7 @@ <h2 id=starting><span class=secno>3. </span> Starting of transitions</h2>
818881
transition. Since it's the new values of these ‘<code
819882
class=css>transition-*</code>’ properties that affect the transition,
820883
these values will be used for the transitions <em>to</em> the associated
821-
transitioning values. For example:</p>
884+
transitioning values. For example:
822885

823886
<pre>li {
824887
transition: background-color linear 1s;
@@ -838,7 +901,7 @@ <h2 id=starting><span class=secno>3. </span> Starting of transitions</h2>
838901
class=property>blue</code>’ to ‘<code class=property>green</code>’
839902
takes 2 seconds. However, when the list item leaves the :hover state, the
840903
transition from ‘<code class=property>green</code>’ to ‘<code
841-
class=property>blue</code>’ takes 1 second.</p>
904+
class=property>blue</code>’ takes 1 second.
842905
</div>
843906

844907
<p> When the computed value of a property changes, implementations must
@@ -918,7 +981,6 @@ <h2 id=reversing><span class=secno>4. </span> Automatically reversing
918981
<ol>
919982
<li> Use the B and A states as its "from" and "to" states respectively. It
920983
does not use the current value as its from state, due to the rules below.
921-
922984

923985
<li> Execute with the same duration T, but starting as if the transition
924986
had already begun, without any transition delay, at the moment which
@@ -982,7 +1044,7 @@ <h2 id=transition-events><span class=secno>5. </span><a
9821044

9831045
<dd>
9841046
<p> The <code>TransitionEvent</code> interface provides specific
985-
contextual information associated with transitions.</p>
1047+
contextual information associated with transitions.
9861048

9871049
<dl>
9881050
<dt> <b>IDL Definition</b>
@@ -1048,7 +1110,6 @@ <h2 id=transition-events><span class=secno>5. </span><a
10481110
<dt> <code class=method-name><a
10491111
id=Events-TransitionEvent-initTransitionEvent
10501112
name=Events-TransitionEvent-initTransitionEvent>initTransitionEvent</a></code>
1051-
10521113

10531114
<dd>
10541115
<div class=method> The <code>initTransitionEvent</code> method is
@@ -1061,7 +1122,7 @@ <h2 id=transition-events><span class=secno>5. </span><a
10611122
times during that phase if necessary. If called multiple times, the
10621123
final invocation takes precedence.
10631124
<p class=issue>Should new events being created still have init*Event
1064-
methods?</p>
1125+
methods?
10651126

10661127
<div class=parameters> <b>Parameters</b>
10671128
<div class=paramtable>
@@ -1584,7 +1645,7 @@ <h3 class=no-num id=normative-references>Normative references</h3>
15841645
Transforms.</cite></a> 3 April 2012. W3C Working Draft. (Work in
15851646
progress.) URL: <a
15861647
href="http://www.w3.org/TR/2012/WD-css3-transforms-20120403/">http://www.w3.org/TR/2012/WD-css3-transforms-20120403/</a>
1587-
</dd>
1648+
</dd>
15881649
<!---->
15891650
</dl>
15901651
<!--end-normative-->
@@ -1604,7 +1665,7 @@ <h3 class=no-num id=other-references>Other references</h3>
16041665
Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 7 June
16051666
2011. W3C Recommendation. URL: <a
16061667
href="http://www.w3.org/TR/2011/REC-CSS2-20110607">http://www.w3.org/TR/2011/REC-CSS2-20110607</a>
1607-
</dd>
1668+
</dd>
16081669
<!---->
16091670

16101671
<dt id=CSS3-IMAGES>[CSS3-IMAGES]
@@ -1614,7 +1675,7 @@ <h3 class=no-num id=other-references>Other references</h3>
16141675
Values and Replaced Content Module Level 3.</cite></a> 17 April 2012. W3C
16151676
Candidate Recommendation. (Work in progress.) URL: <a
16161677
href="http://www.w3.org/TR/2012/CR-css3-images-20120417/">http://www.w3.org/TR/2012/CR-css3-images-20120417/</a>
1617-
</dd>
1678+
</dd>
16181679
<!---->
16191680
</dl>
16201681
<!--end-informative-->
@@ -1641,17 +1702,11 @@ <h2 class=no-num id=property-index>Property index</h2>
16411702

16421703
<tbody>
16431704
<tr>
1644-
<th><a class=property href="#transition">transition</a>
1705+
<th><a class=property href="#transition-delay">transition-delay</a>
16451706

1646-
<td>[&lt;‘transition-property’&gt; ||
1647-
&lt;‘transition-duration’&gt; ||
1648-
&lt;‘transition-timing-function’&gt; ||
1649-
&lt;‘transition-delay’&gt; [, [&lt;‘transition-property’&gt; ||
1650-
&lt;‘transition-duration’&gt; ||
1651-
&lt;‘transition-timing-function’&gt; ||
1652-
&lt;‘transition-delay’&gt;]]*
1707+
<td>&lt;time&gt; [, &lt;time&gt;]*
16531708

1654-
<td>see individual properties
1709+
<td>0s
16551710

16561711
<td>all elements, :before and :after pseudo elements
16571712

@@ -1662,7 +1717,8 @@ <h2 class=no-num id=property-index>Property index</h2>
16621717
<td>interactive
16631718

16641719
<tr>
1665-
<th><a class=property href="#transition-delay">transition-delay</a>
1720+
<th><a class=property
1721+
href="#transition-duration">transition-duration</a>
16661722

16671723
<td>&lt;time&gt; [, &lt;time&gt;]*
16681724

@@ -1678,35 +1734,40 @@ <h2 class=no-num id=property-index>Property index</h2>
16781734

16791735
<tr>
16801736
<th><a class=property
1681-
href="#transition-duration">transition-duration</a>
1737+
href="#transition-property">transition-property</a>
16821738

1683-
<td>&lt;time&gt; [, &lt;time&gt;]*
1739+
<td>none | [ all | &lt;IDENT&gt; ] [ ‘,’ [ all | &lt;IDENT&gt; ] ]*
16841740

1685-
<td>0s
1741+
<td>all
16861742

16871743
<td>all elements, :before and :after pseudo elements
16881744

16891745
<td>no
16901746

16911747
<td>N/A
16921748

1693-
<td>interactive
1749+
<td>visual
16941750

16951751
<tr>
1696-
<th><a class=property
1697-
href="#transition-property">transition-property</a>
1752+
<th><a class=property href="#transition">transition</a>
16981753

1699-
<td>none | [ all | &lt;IDENT&gt; ] [ ‘,’ [ all | &lt;IDENT&gt; ] ]*
1754+
<td>[&lt;‘transition-property’&gt; ||
1755+
&lt;‘transition-duration’&gt; ||
1756+
&lt;‘transition-timing-function’&gt; ||
1757+
&lt;‘transition-delay’&gt; [, [&lt;‘transition-property’&gt; ||
1758+
&lt;‘transition-duration’&gt; ||
1759+
&lt;‘transition-timing-function’&gt; ||
1760+
&lt;‘transition-delay’&gt;]]*
17001761

1701-
<td>all
1762+
<td>see individual properties
17021763

17031764
<td>all elements, :before and :after pseudo elements
17041765

17051766
<td>no
17061767

17071768
<td>N/A
17081769

1709-
<td>visual
1770+
<td>interactive
17101771

17111772
<tr>
17121773
<th><a class=property

0 commit comments

Comments
 (0)