This repository was archived by the owner on Jun 7, 2018. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 33
/
Copy pathcss-integration.html
243 lines (222 loc) · 11.7 KB
/
css-integration.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
<!DOCTYPE html>
<!-- vim: set expandtab ts=2 sw=2 tw=80: -->
<html>
<head>
<title>Web Animations and CSS Integration Note</title>
<meta http-equiv='Content-Type' content='text/html;charset=utf-8'/>
<script src='http://dev.w3.org/2009/dap/ReSpec.js/js/respec.js'
class='remove'></script>
<script class='remove'>
var respecConfig = {
// specification status (e.g. WD, LCWD, NOTE, etc.). If in doubt use
// ED.
specStatus: "unofficial",
// the specification's short name, as in
// http://www.w3.org/TR/short-name/
// shortName: "web-anim-css",
// if your specification has a subtitle that goes below the main
// formal title, define it here
// subtitle : "an excellent document",
// if you wish the publication date to be other than today, set this
// publishDate: "2009-08-06",
// if the specification's copyright date is a range of years, specify
// the start date here:
// copyrightStart: "2005"
// if there is a previously published draft, uncomment this and set
// its YYYY-MM-DD date and its maturity status
// previousPublishDate: "1977-03-15",
// previousMaturity: "WD",
// if there a publicly available Editor's Draft, this is the link
// edDraftURI:
// "http://dev.w3.org/2009/dap/ReSpec.js/documentation.html",
// if this is a LCWD, uncomment and set the end of its review period
// lcEnd: "2009-08-05",
// if you want to have extra CSS, append them to this list
// it is recommended that the respec.css stylesheet be kept
extraCSS: ["http://dev.w3.org/2009/dap/ReSpec.js/css/respec.css",
"web-animations.css"],
// Turning off inlineCSS for now since if extraCSS points to
// a relative URL your testing from a file URL the XHR will fail.
// Probably should turn this back on once this is hosted on a server
// somewhere.
inlineCSS: false,
// editors, add as many as you like
// only "name" is required
editors: [
{ name: "Shane Stephens", mailto: "[email protected]",
company: "Google", companyURL: "http://www.google.com/" },
{ name: "Tab Atkins", mailto: "[email protected]",
company: "Google", companyURL: "http://www.google.com/" },
{ name: "Brian Birtles", mailto: "[email protected]",
company: "Mozilla Japan", companyURL: "http://mozilla.jp/" }
],
// authors, add as many as you like.
// This is optional, uncomment if you have authors as well as editors.
// only "name" is required. Same format as editors.
//authors: [
// { name: "Your Name", url: "http://example.org/",
// company: "Your Company", companyURL: "http://example.com/" },
//],
// XXX If we continue using ReSpec then we need to tweak it to support
// multiple working groups. It includes updating the patent section
// prose to say "groups" instead of "group" etc.
// name of the WG
// wg: "CSS Working Group (part of the Style Activity) and the SVG " +
// "Working Group (part of the Graphics Activity)",
// URI of the public WG page
// wgURI: "http://www.w3.org/Graphics/fx/",
// name (without the @w3c.org) of the public mailing to which comments
// are due
wgPublicList: "public-fx",
// URI of the patent status for this WG, for Rec-track documents
// !!!! IMPORTANT !!!!
// This is important for Rec-track documents, do not copy a patent URI
// from a random document unless you know what you're doing. If in
// doubt ask your friendly neighbourhood Team Contact.
wgPatentURI: "",
noIDLSorting: true,
noIDLIn: true
};
</script>
</head>
<body>
<section id='abstract'>
This is the abstract for your specification.
</section>
<section class="informative">
<h2>Introduction</h2>
<section>
<h3>Relationship to other Specifications</h3>
<p>
This specification extends the CSS Transitions [[CSS3-TRANSITIONS]]
and CSS Animations [[CSS3-ANIMATIONS]] specifications. It also
clarifies the handling of replaced content [[CSS21]] and
<code>image</code> content [[CSS3-IMAGES]].
</p>
</section>
</section>
<section>
<h2>Replaced content and <code>image</code> values</h2>
<p class="todo">
How do you synchronize animations in background images, content
attributes etc.? Does it appear in the animation tree? Is this
a security problem if it does? Do you create a hidden mediaController
and associate everything with that so that at least elements with the
same background all have the same frame?
</p>
</section>
<section>
<h2>The <code>timeline-start</code> property</h2>
<div class="todo">
Values: onload | onstart | manual<br>
Initial: onload<br>
Applies to: Anywhere the <code>timelineStart</code> attribute is allowed.
</div>
</section>
<section>
<h2>CSS Transitions</h2>
<p>
Section 3 of [[!CSS3-TRANSITIONS]] defines the conditions under which a CSS Transition should occur. When these conditions are met, an implementation will behave as if the following objects were constructed via the Web Animation JS API:
<ul>
<li>
For each <var>property</var> referenced by <var>transition-property</var> that has a different
computed style before and after the transition occurs:
<ul>
<li>
The <var>from frame</var>, a <code>WebAnimationFrame</code> with an <var>offset</var> of 0 and a <var>value</var> of the computed style of <var>property</var> just before the transition occurs.
</li>
<li>
The <var>to frame</var>, a <code>WebAnimationFrame</code> with an <var>offset</var> of 1 and a <var>value</var> of the current computed style of <var>property</var>.
</li>
<li>
The <var>frame list</var>, a <code>WebAnimationFrameList</code> containing the <var>from frame</var> and <var>to frame</var>.
</li>
<li>
The <var>animation function</var>, a <code>WebKeyframesAnimationFunction</code> with a <var>property</var> equal to the property being transitioned, <var>frames</var> set to the <var>frame list</var>, an <var>operation</var> of "replace", an <var>accumulateOperation</var> of "replace", and a <var>pace</var> of undefined.
</li>
</ul>
</li>
<li>
The <var>group animation function</var>, a <code>WebGroupedAnimationFunction</code> that contains
all of the <var>animation function</var> objects generated in the previous step.
<li>
The <var>animation timing</var>, a <code>WebTiming</code> with a <var>iterationDuration</var> equal to the <var>transition-duration</var>, a <var>timingFunction</var> equivalent to <var>transition-timing-function</var> (see section ??), and all other properties left at their default values.
</li>
<li>
The <var>animation</var>, a <code>WebAnimation</code> associating <var>group animation function</var> with <var>animation timing</var>.
</li>
<li>
The <var>animation instance</var>, a <code>WebAnimationInstance</code> that is equivalent to one constructed by calling <var>animation.animateLive(element)</var>
</li>
</ul>
</p>
</section>
<section>
<h2><code>@keyframes</code> rules</h2>
<p>
An <code>@keyframe</code> rule can be converted to a <code>WebGroupedAnimationFunction</code> using the following steps:
</p>
<ol>
<li>
For each <var>property</var> referenced in the @keyframes rule:
<ol>
<li>
For each keyframe that <var>property</var> is referenced in:
<ol>
<li>
Construct a <code>WebAnimationFrame</code> with <var>offset</var> equal to
the selector value of the keyframe, <var>value</var> equal to the value of
<var>property</var> within the keyframe, and <var>timingFunction</var> equivalent
to the timing function desribed by the keyframe (if any).
</li>
</ol>
</li>
<li>
If there is no keyframe at 0, or if there is a keyframe at 0 but it does not reference <var>property</var>, construct a <code>WebAnimationFrame</code> with an <var>offset</var> of 0, a <var>value</var> equal to the current computed value of <var>property</var>, and a null <var>timingFunction</var>.
</li>
<li>
If there is no keyframe at 1, or if there is a keyframe at 1 but it does not reference <var>property</var>, construct a <code>WebAnimationFrame</code> with an <var>offset</var> of 1, a <var>value</var> equal to the current computed value of <var>property</var>, and a null <var>timingFunction</var>.
</li>
<li>
Construct a <code>WebAnimationFrameList</code> and add each of the constructed <code>WebAnimationFrame</code> objects to it.
</li>
<li>
Construct a <code>WebKeyframeAnimationFunction</code> with <var>property</var> equal to the <var>property</var> from the @keyframes rule, <var>frames</var> equal to the constructed <code>WebAnimationFrameList</code>, and all other values at their defaults.
</li>
</ol>
</li>
<li>
Construct a <code>WebGroupedAnimationFunction</code> and add each of the constructed <code>WebKeyframeAniamtionFunction</code> objects to it. This is the resulting <code>WebGroupedAnimationFunction</code> object.
</ol>
</section>
<section>
<h2>CSS Animations</h2>
<p>
Section 2 of the [[!CSS3-ANIMATIONS]] specification defines the conditions under which a CSS Animation should occur. When these conditions are met, an implementation will behave as if the following objects were constructed via the Web Animation JS API:
<ul>
<li>
An <var>animation function</var>, constructed from the <code>@keyframes</code> declaration referenced by <var>animation-name</var> as described in <a class="sectionRef" href="#keyframes-rules"></a>.
</li>
<li>
An <var>animation timing</var>, a <code>WebTiming</code> with a <var>iterationDuration</var> equal to the <var>animation-duration</var>, a <var>timingFunction</var> equivalent to <var>animation-timing-function</var> (see <a class="sectionRef" href="#generating-equivalent-timing-functions"></a>), and all other properties left at their default values.
<p class="todo">
Put this object in a par group.
</p>
</li>
<li>
An <var>animation</var>, a <code>WebAnimation</code> associating <var>animation function</var> with <var>animation timing</var>.
</li>
<li>
An <var>animation instance</var>, a <code>WebAnimationInstance</code> that is equivalent to one constructed by calling <var>animation.animateLive(element)</var>
</li>
</ul>
</p>
</section>
<section>
<h2>Generating Equivalent Timing Functions</h2>
<p class="todo">
Can't do this until we've defined the interface for timing functions in the main spec.
</p>
</section>
</body>
</html>