Skip to content

Commit 1a27a64

Browse files
smfrsmfr
committed
2012-01-30 simon.fraser@apple.com
- Formatting only. Change from spans to code elements for correct styling.
1 parent cfb7dcc commit 1a27a64

3 files changed

Lines changed: 130 additions & 151 deletions

File tree

‎css3-transitions/ChangeLog‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
2012-01-30 simon.fraser@apple.com
2+
- Formatting only. Change from spans to code elements for correct styling.
3+
14
2011-07-24 dino@apple.com
25

36
- Inverted range of visibility property (Sylvain feedback 28 April)

‎css3-transitions/Overview.html‎

Lines changed: 100 additions & 120 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<html lang=en>
55
<head>
66
<title>CSS Transitions</title>
7-
<link href=default.css rel=stylesheet type="text/css">
7+
<link href="../default.css" rel=stylesheet type="text/css">
88

99
<style type="text/css">
1010
.rhs { white-space: pre-wrap; }
@@ -29,15 +29,15 @@
2929

3030
<h1>CSS Transitions</h1>
3131

32-
<h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 20 December
33-
2011</h2>
32+
<h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 30 January
33+
2012</h2>
3434

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

38-
<dd> <a href="http://www.w3.org/TR/2011/ED-css3-transitions-20111220/">
38+
<dd> <a href="http://www.w3.org/TR/2012/ED-css3-transitions-20120130/">
3939
http://dev.w3.org/csswg/css3-transitions/</a>
40-
<!--http://www.w3.org/TR/2011/WD-css3-transitions-20111220-->
40+
<!--http://www.w3.org/TR/2012/WD-css3-transitions-20120130-->
4141

4242
<dt>Latest version:
4343

@@ -66,7 +66,7 @@ <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 20 December
6666
<!--begin-copyright-->
6767
<p class=copyright><a
6868
href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
69-
rel=license>Copyright</a> &copy; 2011 <a
69+
rel=license>Copyright</a> &copy; 2012 <a
7070
href="http://www.w3.org/"><acronym
7171
title="World Wide Web Consortium">W3C</acronym></a><sup>&reg;</sup> (<a
7272
href="http://www.csail.mit.edu/"><acronym
@@ -136,25 +136,24 @@ <h2 class="no-num no-toc" id=contents>Table of contents</h2>
136136
<li><a href="#transitions"><span class=secno>2. </span>Transitions</a>
137137
<ul class=toc>
138138
<li><a href="#the-transition-property-property-"><span class=secno>2.1.
139-
</span> The <span class=prop-name>&lsquo;<code
140-
class=property>transition-property</code>&rsquo;</span> Property </a>
139+
</span> The <code class=property>'transition-property'</code> Property
140+
</a>
141141

142142
<li><a href="#the-transition-duration-property-"><span class=secno>2.2.
143-
</span> The <span class=prop-name>&lsquo;<code
144-
class=property>transition-duration</code>&rsquo;</span> Property </a>
143+
</span> The <code class=property>'transition-duration'</code> Property
144+
</a>
145145

146146
<li><a href="#transition-timing-function_tag"><span class=secno>2.3.
147-
</span> The <span class=prop-name>&lsquo;<code
148-
class=property>transition-timing-function</code>&rsquo;</span> Property
149-
</a>
147+
</span> The <code class=property>'transition-timing-function'</code>
148+
Property </a>
150149

151150
<li><a href="#the-transition-delay-property-"><span class=secno>2.4.
152-
</span> The <span class=prop-name>&lsquo;<code
153-
class=property>transition-delay</code>&rsquo;</span> Property </a>
151+
</span> The <code class=property>'transition-delay'</code> Property
152+
</a>
154153

155154
<li><a href="#the-transition-shorthand-property-"><span class=secno>2.5.
156-
</span> The <span class=prop-name>&lsquo;<code
157-
class=property>transition</code>&rsquo;</span> Shorthand Property </a>
155+
</span> The <code class=property>'transition'</code> Shorthand Property
156+
</a>
158157
</ul>
159158

160159
<li><a href="#starting"><span class=secno>3. </span> Starting of
@@ -210,21 +209,16 @@ <h2 id=transitions><span class=secno>2. </span>Transitions</h2>
210209
used to animate smoothly from the old state to the new state over time.
211210

212211
<p> For example, suppose that transitions of one second have been defined
213-
on the <span class=prop-name>&lsquo;<code
214-
class=property>left</code>&rsquo;</span> and <span
215-
class=prop-name>&lsquo;<code
216-
class=property>background-color</code>&rsquo;</span> properties. The
217-
following diagram illustrates the effect of updating those properties on
218-
an element, in this case moving it to the right and changing the
219-
background from red to blue. This assumes other transition parameters
220-
still have their default values.
212+
on the <code class=property>'left'</code> and <code
213+
class=property>'background-color'</code> properties. The following diagram
214+
illustrates the effect of updating those properties on an element, in this
215+
case moving it to the right and changing the background from red to blue.
216+
This assumes other transition parameters still have their default values.
221217

222218
<div class=figure> <img alt="" src=transition1.png></div>
223219

224-
<p class=caption> Transitions of <span class=prop-name>&lsquo;<code
225-
class=property>left</code>&rsquo;</span> and <span
226-
class=prop-name>&lsquo;<code
227-
class=property>background-color</code>&rsquo;</span>
220+
<p class=caption> Transitions of <code class=property>'left'</code> and
221+
<code class=property>'background-color'</code>
228222

229223
<p> Transitions are a presentational effect. The computed value of a
230224
property transitions over time from the old value to the new value.
@@ -247,11 +241,10 @@ <h2 id=transitions><span class=secno>2. </span>Transitions</h2>
247241
transition-duration: 2s;
248242
}
249243
</pre>
250-
The above example defines a transition on the <span
251-
class=prop-name>&lsquo;<code class=property>opacity</code>&rsquo;</span>
252-
property that, when a new value is assigned to it, will cause a smooth
253-
change between the old value and the new value over a period of two
254-
seconds.</div>
244+
The above example defines a transition on the <code
245+
class=property>'opacity'</code> property that, when a new value is
246+
assigned to it, will cause a smooth change between the old value and the
247+
new value over a period of two seconds.</div>
255248

256249
<p> Each of the transition properties accepts a comma-separated list,
257250
allowing multiple transitions to be defined, each acting on a different
@@ -268,10 +261,9 @@ <h2 id=transitions><span class=secno>2. </span>Transitions</h2>
268261
}
269262

270263
</pre>
271-
This will cause the <span class=prop-name>&lsquo;<code
272-
class=property>opacity</code>&rsquo;</span> property to transition over a
273-
period of two seconds and the left property to transition over a period of
274-
four seconds.</div>
264+
This will cause the <code class=property>'opacity'</code> property to
265+
transition over a period of two seconds and the left property to
266+
transition over a period of four seconds.</div>
275267

276268
<p> In the case where the list of values in transition properties do not
277269
have the same length, the list is repeated as a whole in order to provide
@@ -291,25 +283,21 @@ <h2 id=transitions><span class=secno>2. </span>Transitions</h2>
291283
transition-duration: 2s, 1s;
292284
}
293285
</pre>
294-
The above example defines a transition on the <span
295-
class=prop-name>&lsquo;<code class=property>opacity</code>&rsquo;</span>
296-
property of 2 seconds duration, a transition on the <span
297-
class=prop-name>&lsquo;<code class=property>left</code>&rsquo;</span>
298-
property of 1 second duration, a transition on the <span
299-
class=prop-name>&lsquo;<code class=property>top</code>&rsquo;</span>
300-
property of 2 seconds duration and a transition on the <span
301-
class=prop-name>&lsquo;<code class=property>width</code>&rsquo;</span>
302-
property of 1 second duration.</div>
286+
The above example defines a transition on the <code
287+
class=property>'opacity'</code> property of 2 seconds duration, a
288+
transition on the <code class=property>'left'</code> property of 1 second
289+
duration, a transition on the <code class=property>'top'</code> property
290+
of 2 seconds duration and a transition on the <code
291+
class=property>'width'</code> property of 1 second duration.</div>
303292
<!-- ======================================================================================================= -->
304293

305294
<h3 id=the-transition-property-property-><span class=secno>2.1. </span> The
306-
<span class=prop-name>&lsquo;<a href="#transition-property"><code
307-
class=property>transition-property</code></a>&rsquo;</span> Property</h3>
295+
<a href="#transition-property"><code
296+
class=property>'transition-property'</code></a> Property</h3>
308297

309-
<p> The <span class=prop-name>&lsquo;<a href="#transition-property"><code
310-
class=property>transition-property</code></a>&rsquo;</span> property
311-
specifies the name of the CSS property to which the transition is applied.
312-
298+
<p> The <a href="#transition-property"><code
299+
class=property>'transition-property'</code></a> property specifies the
300+
name of the CSS property to which the transition is applied.
313301

314302
<div class=issue> We may ultimately want to support a keypath syntax for
315303
this property. A keypath syntax would enable different transitions to be
@@ -399,12 +387,12 @@ <h3 id=the-transition-property-property-><span class=secno>2.1. </span> The
399387
<!-- ======================================================================================================= -->
400388

401389
<h3 id=the-transition-duration-property-><span class=secno>2.2. </span> The
402-
<span class=prop-name>&lsquo;<a href="#transition-duration"><code
403-
class=property>transition-duration</code></a>&rsquo;</span> Property</h3>
390+
<a href="#transition-duration"><code
391+
class=property>'transition-duration'</code></a> Property</h3>
404392

405-
<p> The <span class=prop-name>&lsquo;<a href="#transition-duration"><code
406-
class=property>transition-duration</code></a>&rsquo;</span> property
407-
defines the length of time that a transition takes.
393+
<p> The <a href="#transition-duration"><code
394+
class=property>'transition-duration'</code></a> property defines the
395+
length of time that a transition takes.
408396

409397
<table class=propdef>
410398
<tbody>
@@ -452,25 +440,23 @@ <h3 id=the-transition-duration-property-><span class=secno>2.2. </span> The
452440
<p> This property specifies how long the transition from the old value to
453441
the new value should take. By default the value is &lsquo;<code
454442
class=css>0s</code>&rsquo;, meaning that the transition is immediate (i.e.
455-
there will be no animation). A negative value for <a class=prop-name
456-
href="#transition-duration">transition-duration</a> is treated as
457-
&lsquo;<code class=css>0s</code>&rsquo;.</p>
443+
there will be no animation). A negative value for <a
444+
href="#transition-duration"><code
445+
class=property>transition-duration</code></a> is treated as &lsquo;<code
446+
class=css>0s</code>&rsquo;.</p>
458447
<!-- =======================================================================================================
459448
-->
460449

461450
<h3 id="transition-timing-function_tag"><span class=secno>2.3. </span> The
462-
<span class=prop-name>&lsquo;<a href="#transition-timing-function"><code
463-
class=property>transition-timing-function</code></a>&rsquo;</span>
464-
Property</h3>
451+
<a href="#transition-timing-function"><code
452+
class=property>'transition-timing-function'</code></a> Property</h3>
465453

466-
<p> The <span class=prop-name>&lsquo;<a
467-
href="#transition-timing-function"><code
468-
class=property>transition-timing-function</code></a>&rsquo;</span>
469-
property describes how the intermediate values used during a transition
470-
will be calculated. It allows for a transition to change speed over its
471-
duration. These effects are commonly called <em>easing</em> functions. In
472-
either case, a mathematical function that provides a smooth curve is used.
473-
454+
<p> The <a href="#transition-timing-function"><code
455+
class=property>'transition-timing-function'</code></a> property describes
456+
how the intermediate values used during a transition will be calculated.
457+
It allows for a transition to change speed over its duration. These
458+
effects are commonly called <em>easing</em> functions. In either case, a
459+
mathematical function that provides a smooth curve is used.
474460

475461
<p> Timing functions are either defined as a stepping function or a <a
476462
href="http://en.wikipedia.org/wiki/B%C3%A9zier_curve#Cubic_B.C3.A9zier_curves">cubic
@@ -495,17 +481,13 @@ <h3 id="transition-timing-function_tag"><span class=secno>2.3. </span> The
495481
href="http://en.wikipedia.org/wiki/B%C3%A9zier_curve#Cubic_B.C3.A9zier_curves">cubic
496482
bezier curve</a> is defined by four control points, P<sub>0</sub> through
497483
P<sub>3</sub> (see Figure 1). P<sub>0</sub> and P<sub>3</sub> are always
498-
set to (0,0) and (1,1). The <span class=prop-name>&lsquo;<a
499-
href="#transition-timing-function"><code
500-
class=property>transition-timing-function</code></a>&rsquo;</span>
501-
property is used to specify the values for points P<sub>1</sub> and
502-
P<sub>2</sub>. These can be set to preset values using the keywords listed
503-
below, or can be set to specific values using the <span
504-
class=prop-value>&lsquo;<code
505-
class=property>cubic-bezier</code>&rsquo;</span> function. In the <span
506-
class=prop-value>&lsquo;<code
507-
class=property>cubic-bezier</code>&rsquo;</span> function, P<sub>1</sub>
508-
and P<sub>2</sub> are each specified by both an X and Y value.
484+
set to (0,0) and (1,1). The <a href="#transition-timing-function"><code
485+
class=property>'transition-timing-function'</code></a> property is used to
486+
specify the values for points P<sub>1</sub> and P<sub>2</sub>. These can
487+
be set to preset values using the keywords listed below, or can be set to
488+
specific values using the <code class=css>'cubic-bezier'</code> function.
489+
In the <code class=css>'cubic-bezier'</code> function, P<sub>1</sub> and
490+
P<sub>2</sub> are each specified by both an X and Y value.
509491

510492
<div class=figure> <img
511493
alt="The bezier timing function is a smooth curve from point P0 = (0,0) to point P3 = (1,1). The length and orientation of the line segment P0-P1 determines the tangent and the curvature of the curve at P0 and the line segment P2-P3 does the same at P3."
@@ -621,31 +603,30 @@ <h3 id="transition-timing-function_tag"><span class=secno>2.3. </span> The
621603
</dl>
622604
<!-- ======================================================================================================= -->
623605

624-
<h3 id=the-transition-delay-property-><span class=secno>2.4. </span> The
625-
<span class=prop-name>&lsquo;<a href="#transition-delay"><code
626-
class=property>transition-delay</code></a>&rsquo;</span> Property</h3>
627-
628-
<p> The <span class=prop-name>&lsquo;<a href="#transition-delay"><code
629-
class=property>transition-delay</code></a>&rsquo;</span> property defines
630-
when the transition will start. It allows a transition to begin execution
631-
some some period of time from when it is applied. A <span
632-
class=prop-name>&lsquo;<a href="#transition-delay"><code
633-
class=property>transition-delay</code></a>&rsquo;</span> value of
634-
&lsquo;<code class=css>0s</code>&rsquo; means the transition will execute
635-
as soon as the property is changed. Otherwise, the value specifies an
636-
offset from the moment the property is changed, and the transition will
637-
delay execution by that offset.
638-
639-
<p> If the value for <span class=prop-name>&lsquo;<a
606+
<h3 id=the-transition-delay-property-><span class=secno>2.4. </span> The <a
607+
href="#transition-delay"><code
608+
class=property>'transition-delay'</code></a> Property</h3>
609+
610+
<p> The <a href="#transition-delay"><code
611+
class=property>'transition-delay'</code></a> property defines when the
612+
transition will start. It allows a transition to begin execution some some
613+
period of time from when it is applied. A <a
614+
href="#transition-delay"><code
615+
class=property>'transition-delay'</code></a> value of &lsquo;<code
616+
class=css>0s</code>&rsquo; means the transition will execute as soon as
617+
the property is changed. Otherwise, the value specifies an offset from the
618+
moment the property is changed, and the transition will delay execution by
619+
that offset.
620+
621+
<p> If the value for <a href="#transition-delay"><code
622+
class=property>'transition-delay'</code></a> is a negative time offset
623+
then the transition will execute the moment the property is changed, but
624+
will appear to have begun execution at the specified offset. That is, the
625+
transition will appear to begin part-way through its play cycle. In the
626+
case where a transition has implied starting values and a negative <a
640627
href="#transition-delay"><code
641-
class=property>transition-delay</code></a>&rsquo;</span> is a negative
642-
time offset then the transition will execute the moment the property is
643-
changed, but will appear to have begun execution at the specified offset.
644-
That is, the transition will appear to begin part-way through its play
645-
cycle. In the case where a transition has implied starting values and a
646-
negative <span class=prop-name>&lsquo;<a href="#transition-delay"><code
647-
class=property>transition-delay</code></a>&rsquo;</span>, the starting
648-
values are taken from the moment the property is changed.
628+
class=property>'transition-delay'</code></a>, the starting values are
629+
taken from the moment the property is changed.
649630

650631
<table class=propdef>
651632
<tbody>
@@ -692,12 +673,12 @@ <h3 id=the-transition-delay-property-><span class=secno>2.4. </span> The
692673
<!-- ======================================================================================================= -->
693674

694675
<h3 id=the-transition-shorthand-property-><span class=secno>2.5. </span>
695-
The <span class=prop-name>&lsquo;<a href="#transition"><code
696-
class=property>transition</code></a>&rsquo;</span> Shorthand Property</h3>
676+
The <a href="#transition"><code class=property>'transition'</code></a>
677+
Shorthand Property</h3>
697678

698-
<p> The <span class=prop-name>&lsquo;<a href="#transition"><code
699-
class=property>transition</code></a>&rsquo;</span> shorthand property
700-
combines the four properties described above into a single property.
679+
<p> The <a href="#transition"><code class=property>'transition'</code></a>
680+
shorthand property combines the four properties described above into a
681+
single property.
701682

702683
<p> Note that order is important in this property. The first value that can
703684
be parsed as a time is assigned to the transition-duration. The second
@@ -953,8 +934,8 @@ <h2 id=transition-events-><span class=secno>5. </span> Transition Events</h2>
953934

954935
<dd> The amount of time the transition has been running, in seconds,
955936
when this event fired. Note that this value is not affected by the
956-
value of <a class=prop-name
957-
href="#transition-delay">transition-delay</a>.
937+
value of <a href="#transition-delay"><code
938+
class=property>transition-delay</code></a>.
958939
</dl>
959940

960941
<dt> <b>Methods</b>
@@ -1094,12 +1075,11 @@ <h2 id=animation-of-property-types-><span class=secno>6. </span> Animation
10941075
number of items, each item in the list is interpolated using the rules
10951076
above. Otherwise the interpolation is determined by the property rules.
10961077
If the property extends its list by repeating values, then this repeated
1097-
form will be used in the interpolation (<span
1098-
class=prop-name>&lsquo;<code
1099-
class=property>background-position</code>&rsquo;</span> in an example of
1100-
a property that would transition between lists of different lengths). If
1101-
the property does not allow extending its list, then no interpolation
1102-
will occur.
1078+
form will be used in the interpolation (<code
1079+
class=property>'background-position'</code> is an example of a property
1080+
that would transition between lists of different lengths). If the
1081+
property does not allow extending its list, then no interpolation will
1082+
occur.
11031083

11041084
<li> <strong>a shorthand property</strong>: If any part of a shorthand can
11051085
be animated, then interpolation is performed as if those animatable

0 commit comments

Comments
 (0)