- From: Simon Fraser via cvs-syncmail <cvsmail@w3.org>
- Date: Mon, 30 Jan 2012 16:08:42 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-transitions
In directory hutz:/tmp/cvs-serv24491
Modified Files:
ChangeLog Overview.html Overview.src.html
Log Message:
2012-01-30 simon.fraser@apple.com
- Formatting only. Change from spans to code elements for correct styling.
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-transitions/Overview.html,v
retrieving revision 1.25
retrieving revision 1.26
diff -u -d -r1.25 -r1.26
--- Overview.html 20 Dec 2011 17:46:05 -0000 1.25
+++ Overview.html 30 Jan 2012 16:08:40 -0000 1.26
@@ -4,7 +4,7 @@
<html lang=en>
<head>
<title>CSS Transitions</title>
- <link href=default.css rel=stylesheet type="text/css">
+ <link href="../default.css" rel=stylesheet type="text/css">
<style type="text/css">
.rhs { white-space: pre-wrap; }
@@ -29,15 +29,15 @@
<h1>CSS Transitions</h1>
- <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 20 December
- 2011</h2>
+ <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 30 January
+ 2012</h2>
<dl>
<dt>This version:
- <dd> <a href="http://www.w3.org/TR/2011/ED-css3-transitions-20111220/">
+ <dd> <a href="http://www.w3.org/TR/2012/ED-css3-transitions-20120130/">
http://dev.w3.org/csswg/css3-transitions/</a>
- <!--http://www.w3.org/TR/2011/WD-css3-transitions-20111220-->
+ <!--http://www.w3.org/TR/2012/WD-css3-transitions-20120130-->
<dt>Latest version:
@@ -66,7 +66,7 @@
<!--begin-copyright-->
<p class=copyright><a
href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
- rel=license>Copyright</a> © 2011 <a
+ rel=license>Copyright</a> © 2012 <a
href="http://www.w3.org/"><acronym
title="World Wide Web Consortium">W3C</acronym></a><sup>®</sup> (<a
href="http://www.csail.mit.edu/"><acronym
@@ -136,25 +136,24 @@
<li><a href="#transitions"><span class=secno>2. </span>Transitions</a>
<ul class=toc>
<li><a href="#the-transition-property-property-"><span class=secno>2.1.
- </span> The <span class=prop-name>‘<code
- class=property>transition-property</code>’</span> Property </a>
+ </span> The <code class=property>'transition-property'</code> Property
+ </a>
<li><a href="#the-transition-duration-property-"><span class=secno>2.2.
- </span> The <span class=prop-name>‘<code
- class=property>transition-duration</code>’</span> Property </a>
+ </span> The <code class=property>'transition-duration'</code> Property
+ </a>
<li><a href="#transition-timing-function_tag"><span class=secno>2.3.
- </span> The <span class=prop-name>‘<code
- class=property>transition-timing-function</code>’</span> Property
- </a>
+ </span> The <code class=property>'transition-timing-function'</code>
+ Property </a>
<li><a href="#the-transition-delay-property-"><span class=secno>2.4.
- </span> The <span class=prop-name>‘<code
- class=property>transition-delay</code>’</span> Property </a>
+ </span> The <code class=property>'transition-delay'</code> Property
+ </a>
<li><a href="#the-transition-shorthand-property-"><span class=secno>2.5.
- </span> The <span class=prop-name>‘<code
- class=property>transition</code>’</span> Shorthand Property </a>
+ </span> The <code class=property>'transition'</code> Shorthand Property
+ </a>
</ul>
<li><a href="#starting"><span class=secno>3. </span> Starting of
@@ -210,21 +209,16 @@
used to animate smoothly from the old state to the new state over time.
<p> For example, suppose that transitions of one second have been defined
- on the <span class=prop-name>‘<code
- class=property>left</code>’</span> and <span
- class=prop-name>‘<code
- class=property>background-color</code>’</span> properties. The
- following diagram illustrates the effect of updating those properties on
- an element, in this case moving it to the right and changing the
- background from red to blue. This assumes other transition parameters
- still have their default values.
+ on the <code class=property>'left'</code> and <code
+ class=property>'background-color'</code> properties. The following diagram
+ illustrates the effect of updating those properties on an element, in this
+ case moving it to the right and changing the background from red to blue.
+ This assumes other transition parameters still have their default values.
<div class=figure> <img alt="" src=transition1.png></div>
- <p class=caption> Transitions of <span class=prop-name>‘<code
- class=property>left</code>’</span> and <span
- class=prop-name>‘<code
- class=property>background-color</code>’</span>
+ <p class=caption> Transitions of <code class=property>'left'</code> and
+ <code class=property>'background-color'</code>
<p> Transitions are a presentational effect. The computed value of a
property transitions over time from the old value to the new value.
@@ -247,11 +241,10 @@
transition-duration: 2s;
}
</pre>
- The above example defines a transition on the <span
- class=prop-name>‘<code class=property>opacity</code>’</span>
- property that, when a new value is assigned to it, will cause a smooth
- change between the old value and the new value over a period of two
- seconds.</div>
+ The above example defines a transition on the <code
+ class=property>'opacity'</code> property that, when a new value is
+ assigned to it, will cause a smooth change between the old value and the
+ new value over a period of two seconds.</div>
<p> Each of the transition properties accepts a comma-separated list,
allowing multiple transitions to be defined, each acting on a different
@@ -268,10 +261,9 @@
}
</pre>
- This will cause the <span class=prop-name>‘<code
- class=property>opacity</code>’</span> property to transition over a
- period of two seconds and the left property to transition over a period of
- four seconds.</div>
+ This will cause the <code class=property>'opacity'</code> property to
+ transition over a period of two seconds and the left property to
+ transition over a period of four seconds.</div>
<p> In the case where the list of values in transition properties do not
have the same length, the list is repeated as a whole in order to provide
@@ -291,25 +283,21 @@
transition-duration: 2s, 1s;
}
</pre>
- The above example defines a transition on the <span
- class=prop-name>‘<code class=property>opacity</code>’</span>
- property of 2 seconds duration, a transition on the <span
- class=prop-name>‘<code class=property>left</code>’</span>
- property of 1 second duration, a transition on the <span
- class=prop-name>‘<code class=property>top</code>’</span>
- property of 2 seconds duration and a transition on the <span
- class=prop-name>‘<code class=property>width</code>’</span>
- property of 1 second duration.</div>
+ The above example defines a transition on the <code
+ class=property>'opacity'</code> property of 2 seconds duration, a
+ transition on the <code class=property>'left'</code> property of 1 second
+ duration, a transition on the <code class=property>'top'</code> property
+ of 2 seconds duration and a transition on the <code
+ class=property>'width'</code> property of 1 second duration.</div>
<!-- ======================================================================================================= -->
<h3 id=the-transition-property-property-><span class=secno>2.1. </span> The
- <span class=prop-name>‘<a href="#transition-property"><code
- class=property>transition-property</code></a>’</span> Property</h3>
+ <a href="#transition-property"><code
+ class=property>'transition-property'</code></a> Property</h3>
- <p> The <span class=prop-name>‘<a href="#transition-property"><code
- class=property>transition-property</code></a>’</span> property
- specifies the name of the CSS property to which the transition is applied.
-
+ <p> The <a href="#transition-property"><code
+ class=property>'transition-property'</code></a> property specifies the
+ name of the CSS property to which the transition is applied.
<div class=issue> We may ultimately want to support a keypath syntax for
this property. A keypath syntax would enable different transitions to be
@@ -399,12 +387,12 @@
<!-- ======================================================================================================= -->
<h3 id=the-transition-duration-property-><span class=secno>2.2. </span> The
- <span class=prop-name>‘<a href="#transition-duration"><code
- class=property>transition-duration</code></a>’</span> Property</h3>
+ <a href="#transition-duration"><code
+ class=property>'transition-duration'</code></a> Property</h3>
- <p> The <span class=prop-name>‘<a href="#transition-duration"><code
- class=property>transition-duration</code></a>’</span> property
- defines the length of time that a transition takes.
+ <p> The <a href="#transition-duration"><code
+ class=property>'transition-duration'</code></a> property defines the
+ length of time that a transition takes.
<table class=propdef>
<tbody>
@@ -452,25 +440,23 @@
<p> This property specifies how long the transition from the old value to
the new value should take. By default the value is ‘<code
class=css>0s</code>’, meaning that the transition is immediate (i.e.
- there will be no animation). A negative value for <a class=prop-name
- href="#transition-duration">transition-duration</a> is treated as
- ‘<code class=css>0s</code>’.</p>
+ there will be no animation). A negative value for <a
+ href="#transition-duration"><code
+ class=property>transition-duration</code></a> is treated as ‘<code
+ class=css>0s</code>’.</p>
<!-- =======================================================================================================
-->
<h3 id="transition-timing-function_tag"><span class=secno>2.3. </span> The
- <span class=prop-name>‘<a href="#transition-timing-function"><code
- class=property>transition-timing-function</code></a>’</span>
- Property</h3>
+ <a href="#transition-timing-function"><code
+ class=property>'transition-timing-function'</code></a> Property</h3>
- <p> The <span class=prop-name>‘<a
- href="#transition-timing-function"><code
- class=property>transition-timing-function</code></a>’</span>
- property describes how the intermediate values used during a transition
- will be calculated. It allows for a transition to change speed over its
- duration. These effects are commonly called <em>easing</em> functions. In
- either case, a mathematical function that provides a smooth curve is used.
-
+ <p> The <a href="#transition-timing-function"><code
+ class=property>'transition-timing-function'</code></a> property describes
+ how the intermediate values used during a transition will be calculated.
+ It allows for a transition to change speed over its duration. These
+ effects are commonly called <em>easing</em> functions. In either case, a
+ mathematical function that provides a smooth curve is used.
<p> Timing functions are either defined as a stepping function or a <a
href="http://en.wikipedia.org/wiki/B%C3%A9zier_curve#Cubic_B.C3.A9zier_curves">cubic
@@ -495,17 +481,13 @@
href="http://en.wikipedia.org/wiki/B%C3%A9zier_curve#Cubic_B.C3.A9zier_curves">cubic
bezier curve</a> is defined by four control points, P<sub>0</sub> through
P<sub>3</sub> (see Figure 1). P<sub>0</sub> and P<sub>3</sub> are always
- set to (0,0) and (1,1). The <span class=prop-name>‘<a
- href="#transition-timing-function"><code
- class=property>transition-timing-function</code></a>’</span>
- property is used to specify the values for points P<sub>1</sub> and
- P<sub>2</sub>. These can be set to preset values using the keywords listed
- below, or can be set to specific values using the <span
- class=prop-value>‘<code
- class=property>cubic-bezier</code>’</span> function. In the <span
- class=prop-value>‘<code
- class=property>cubic-bezier</code>’</span> function, P<sub>1</sub>
- and P<sub>2</sub> are each specified by both an X and Y value.
+ set to (0,0) and (1,1). The <a href="#transition-timing-function"><code
+ class=property>'transition-timing-function'</code></a> property is used to
+ specify the values for points P<sub>1</sub> and P<sub>2</sub>. These can
+ be set to preset values using the keywords listed below, or can be set to
+ specific values using the <code class=css>'cubic-bezier'</code> function.
+ In the <code class=css>'cubic-bezier'</code> function, P<sub>1</sub> and
+ P<sub>2</sub> are each specified by both an X and Y value.
<div class=figure> <img
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 @@
</dl>
<!-- ======================================================================================================= -->
- <h3 id=the-transition-delay-property-><span class=secno>2.4. </span> The
- <span class=prop-name>‘<a href="#transition-delay"><code
- class=property>transition-delay</code></a>’</span> Property</h3>
+ <h3 id=the-transition-delay-property-><span class=secno>2.4. </span> The <a
+ href="#transition-delay"><code
+ class=property>'transition-delay'</code></a> Property</h3>
- <p> The <span class=prop-name>‘<a href="#transition-delay"><code
- class=property>transition-delay</code></a>’</span> property defines
- when the transition will start. It allows a transition to begin execution
- some some period of time from when it is applied. A <span
- class=prop-name>‘<a href="#transition-delay"><code
- class=property>transition-delay</code></a>’</span> value of
- ‘<code class=css>0s</code>’ means the transition will execute
- as soon as the property is changed. Otherwise, the value specifies an
- offset from the moment the property is changed, and the transition will
- delay execution by that offset.
+ <p> The <a href="#transition-delay"><code
+ class=property>'transition-delay'</code></a> property defines when the
+ transition will start. It allows a transition to begin execution some some
+ period of time from when it is applied. A <a
+ href="#transition-delay"><code
+ class=property>'transition-delay'</code></a> value of ‘<code
+ class=css>0s</code>’ means the transition will execute as soon as
+ the property is changed. Otherwise, the value specifies an offset from the
+ moment the property is changed, and the transition will delay execution by
+ that offset.
- <p> If the value for <span class=prop-name>‘<a
+ <p> If the value for <a href="#transition-delay"><code
+ class=property>'transition-delay'</code></a> is a negative time offset
+ then the transition will execute the moment the property is changed, but
+ will appear to have begun execution at the specified offset. That is, the
+ transition will appear to begin part-way through its play cycle. In the
+ case where a transition has implied starting values and a negative <a
href="#transition-delay"><code
- class=property>transition-delay</code></a>’</span> is a negative
- time offset then the transition will execute the moment the property is
- changed, but will appear to have begun execution at the specified offset.
- That is, the transition will appear to begin part-way through its play
- cycle. In the case where a transition has implied starting values and a
- negative <span class=prop-name>‘<a href="#transition-delay"><code
- class=property>transition-delay</code></a>’</span>, the starting
- values are taken from the moment the property is changed.
+ class=property>'transition-delay'</code></a>, the starting values are
+ taken from the moment the property is changed.
<table class=propdef>
<tbody>
@@ -692,12 +673,12 @@
<!-- ======================================================================================================= -->
<h3 id=the-transition-shorthand-property-><span class=secno>2.5. </span>
- The <span class=prop-name>‘<a href="#transition"><code
- class=property>transition</code></a>’</span> Shorthand Property</h3>
+ The <a href="#transition"><code class=property>'transition'</code></a>
+ Shorthand Property</h3>
- <p> The <span class=prop-name>‘<a href="#transition"><code
- class=property>transition</code></a>’</span> shorthand property
- combines the four properties described above into a single property.
+ <p> The <a href="#transition"><code class=property>'transition'</code></a>
+ shorthand property combines the four properties described above into a
+ single property.
<p> Note that order is important in this property. The first value that can
be parsed as a time is assigned to the transition-duration. The second
@@ -953,8 +934,8 @@
<dd> The amount of time the transition has been running, in seconds,
when this event fired. Note that this value is not affected by the
- value of <a class=prop-name
- href="#transition-delay">transition-delay</a>.
+ value of <a href="#transition-delay"><code
+ class=property>transition-delay</code></a>.
</dl>
<dt> <b>Methods</b>
@@ -1094,12 +1075,11 @@
number of items, each item in the list is interpolated using the rules
above. Otherwise the interpolation is determined by the property rules.
If the property extends its list by repeating values, then this repeated
- form will be used in the interpolation (<span
- class=prop-name>‘<code
- class=property>background-position</code>’</span> in an example of
- a property that would transition between lists of different lengths). If
- the property does not allow extending its list, then no interpolation
- will occur.
+ form will be used in the interpolation (<code
+ class=property>'background-position'</code> is an example of a property
+ that would transition between lists of different lengths). If the
+ property does not allow extending its list, then no interpolation will
+ occur.
<li> <strong>a shorthand property</strong>: If any part of a shorthand can
be animated, then interpolation is performed as if those animatable
Index: ChangeLog
===================================================================
RCS file: /sources/public/csswg/css3-transitions/ChangeLog,v
retrieving revision 1.15
retrieving revision 1.16
diff -u -d -r1.15 -r1.16
--- ChangeLog 25 Jul 2011 00:35:29 -0000 1.15
+++ ChangeLog 30 Jan 2012 16:08:40 -0000 1.16
@@ -1,3 +1,6 @@
+2012-01-30 simon.fraser@apple.com
+- Formatting only. Change from spans to code elements for correct styling.
+
2011-07-24 dino@apple.com
- Inverted range of visibility property (Sylvain feedback 28 April)
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-transitions/Overview.src.html,v
retrieving revision 1.27
retrieving revision 1.28
diff -u -d -r1.27 -r1.28
--- Overview.src.html 3 Jan 2012 20:44:24 -0000 1.27
+++ Overview.src.html 30 Jan 2012 16:08:40 -0000 1.28
@@ -87,13 +87,14 @@
Normally when the value of a CSS property changes, the rendered result is instantly updated, with the affected elements immediately changing from the old property value to the new property value. This section describes a way to specify transitions using new CSS properties. These properties are used to animate smoothly from the old state to the new state over time.
</p>
<p>
- For example, suppose that transitions of one second have been defined on the <span class="prop-name">'left'</span> and <span class="prop-name">'background-color'</span> properties. The following diagram illustrates the effect of updating those properties on an element, in this case moving it to the right and changing the background from red to blue. This assumes other transition parameters still have their default values.
+ For example, suppose that transitions of one second have been defined on the <code class="property">'left'</code> and
+ <code class="property">'background-color'</code> properties. The following diagram illustrates the effect of updating those properties on an element, in this case moving it to the right and changing the background from red to blue. This assumes other transition parameters still have their default values.
</p>
<div class="figure">
<img src="transition1.png" alt="">
</div>
<p class="caption">
- Transitions of <span class="prop-name">'left'</span> and <span class="prop-name">'background-color'</span>
+ Transitions of <code class="property">'left'</code> and <code class="property">'background-color'</code>
</p>
<p>
Transitions are a presentational effect. The computed value of a property transitions over time from the old value to the new value. Therefore if a script queries the computed style of a property as it is transitioning, it will see an intermediate value that represents the current animated value of the property.
@@ -114,7 +115,7 @@
transition-property: opacity;
transition-duration: 2s;
}
- </pre>The above example defines a transition on the <span class="prop-name">'opacity'</span> property that, when a new value is assigned to it, will cause a smooth change between the old value and the new value over a period of two seconds.
+ </pre>The above example defines a transition on the <code class="property">'opacity'</code> property that, when a new value is assigned to it, will cause a smooth change between the old value and the new value over a period of two seconds.
</div>
<p>
Each of the transition properties accepts a comma-separated list, allowing multiple transitions to be defined, each acting on a different property. In this case, the individual transitions take their parameters from the same index in all the lists. For example:
@@ -129,7 +130,7 @@
transition-duration: 2s, 4s;
}
- </pre>This will cause the <span class="prop-name">'opacity'</span> property to transition over a period of two seconds and the left property to transition over a period of four seconds.
+ </pre>This will cause the <code class="property">'opacity'</code> property to transition over a period of two seconds and the left property to transition over a period of four seconds.
</div>
<p>
@@ -151,22 +152,20 @@
transition-property: opacity, left, top, width;
transition-duration: 2s, 1s;
}
- </pre>The above example defines a transition on the <span
- class="prop-name">'opacity'</span> property of 2 seconds duration, a
- transition on the <span class="prop-name">'left'</span> property of 1
- second duration, a transition on the <span
- class="prop-name">'top'</span> property of 2 seconds duration and a
- transition on the <span class="prop-name">'width'</span> property of 1
+ </pre>The above example defines a transition on the <code class="property">'opacity'</code> property of 2 seconds duration, a
+ transition on the <code class="property">'left'</code> property of 1
+ second duration, a transition on the <code class="property">'top'</code> property of 2 seconds duration and a
+ transition on the <code class="property">'width'</code> property of 1
second duration.
</div>
<!-- ======================================================================================================= -->
<h3>
- The <span class="prop-name">'transition-property'</span> Property
+ The <code class="property">'transition-property'</code> Property
</h3>
<p>
- The <span class="prop-name">'transition-property'</span> property specifies the name of the CSS property to which the transition is applied.
+ The <code class="property">'transition-property'</code> property specifies the name of the CSS property to which the transition is applied.
</p>
<div class="issue">
We may ultimately want to support a keypath syntax for this property. A keypath syntax would enable different transitions to be specified for components of a property. For example the blur of a shadow could have a different transition than the color of a shadow.
@@ -277,10 +276,10 @@
<!-- ======================================================================================================= -->
<h3>
- The <span class="prop-name">'transition-duration'</span> Property
+ The <code class="property">'transition-duration'</code> Property
</h3>
<p>
- The <span class="prop-name">'transition-duration'</span> property defines the length of time that a transition takes.
+ The <code class="property">'transition-duration'</code> property defines the length of time that a transition takes.
</p>
<table class="propdef">
<tbody>
@@ -351,17 +350,17 @@
</tbody>
</table>
<p>
- This property specifies how long the transition from the old value to the new value should take. By default the value is '0s', meaning that the transition is immediate (i.e. there will be no animation). A negative value for <span class="prop-name">transition-duration</span> is treated as '0s'.
+ This property specifies how long the transition from the old value to the new value should take. By default the value is '0s', meaning that the transition is immediate (i.e. there will be no animation). A negative value for <code class="property">transition-duration</code> is treated as '0s'.
</p>
<!-- =======================================================================================================
-->
<h3 id="transition-timing-function_tag">
- The <span class="prop-name">'transition-timing-function'</span> Property
+ The <code class="property">'transition-timing-function'</code> Property
</h3>
<p>
- The <span class="prop-name">'transition-timing-function'</span> property
+ The <code class="property">'transition-timing-function'</code> property
describes how the intermediate values used during a transition will be
calculated. It allows for a transition to change speed over its
duration. These effects are commonly called <em>easing</em> functions.
@@ -408,13 +407,11 @@
href="http://en.wikipedia.org/wiki/B%C3%A9zier_curve#Cubic_B.C3.A9zier_curves">cubic
bezier curve</a> is defined by four control points, P<sub>0</sub>
through P<sub>3</sub> (see Figure 1). P<sub>0</sub> and P<sub>3</sub>
- are always set to (0,0) and (1,1). The <span
- class="prop-name">'transition-timing-function'</span> property is used
+ are always set to (0,0) and (1,1). The <code class="property">'transition-timing-function'</code> property is used
to specify the values for points P<sub>1</sub> and P<sub>2</sub>. These
can be set to preset values using the keywords listed below, or can be
- set to specific values using the <span
- class="prop-value">'cubic-bezier'</span> function. In the <span
- class="prop-value">'cubic-bezier'</span> function, P<sub>1</sub> and
+ set to specific values using the <code class="css">'cubic-bezier'</code> function.
+ In the <code class="css">'cubic-bezier'</code> function, P<sub>1</sub> and
P<sub>2</sub> are each specified by both an X and Y value.
</p>
<div class="figure">
@@ -566,13 +563,13 @@
</dd>
</dl><!-- ======================================================================================================= -->
<h3>
- The <span class="prop-name">'transition-delay'</span> Property
+ The <code class="property">'transition-delay'</code> Property
</h3>
<p>
- The <span class="prop-name">'transition-delay'</span> property defines when the transition will start. It allows a transition to begin execution some some period of time from when it is applied. A <span class="prop-name">'transition-delay'</span> value of '0s' means the transition will execute as soon as the property is changed. Otherwise, the value specifies an offset from the moment the property is changed, and the transition will delay execution by that offset.
+ The <code class="property">'transition-delay'</code> property defines when the transition will start. It allows a transition to begin execution some some period of time from when it is applied. A <code class="property">'transition-delay'</code> value of '0s' means the transition will execute as soon as the property is changed. Otherwise, the value specifies an offset from the moment the property is changed, and the transition will delay execution by that offset.
</p>
<p>
- If the value for <span class="prop-name">'transition-delay'</span> is a negative time offset then the transition will execute the moment the property is changed, but will appear to have begun execution at the specified offset. That is, the transition will appear to begin part-way through its play cycle. In the case where a transition has implied starting values and a negative <span class="prop-name">'transition-delay'</span>, the starting values are taken from the moment the property is changed.
+ If the value for <code class="property">'transition-delay'</code> is a negative time offset then the transition will execute the moment the property is changed, but will appear to have begun execution at the specified offset. That is, the transition will appear to begin part-way through its play cycle. In the case where a transition has implied starting values and a negative <code class="property">'transition-delay'</code>, the starting values are taken from the moment the property is changed.
</p>
<table class="propdef">
<tbody>
@@ -643,10 +640,10 @@
</tbody>
</table><!-- ======================================================================================================= -->
<h3>
- The <span class="prop-name">'transition'</span> Shorthand Property
+ The <code class="property">'transition'</code> Shorthand Property
</h3>
<p>
- The <span class="prop-name">'transition'</span> shorthand property combines the four properties described above into a single property.
+ The <code class="property">'transition'</code> shorthand property combines the four properties described above into a single property.
</p>
<p>
Note that order is important in this property. The first value that can be
@@ -926,7 +923,7 @@
<code class='attribute-name'><a id="Events-TransitionEvent-elapsedTime" name='Events-TransitionEvent-elapsedTime'>elapsedTime</a></code> of type <code>float</code>, readonly
</dt>
<dd>
- The amount of time the transition has been running, in seconds, when this event fired. Note that this value is not affected by the value of <span class="prop-name">transition-delay</span>.
+ The amount of time the transition has been running, in seconds, when this event fired. Note that this value is not affected by the value of <code class="property">transition-delay</code>.
</dd>
</dl>
</dd>
@@ -1090,9 +1087,8 @@
same number of items, each item in the list is interpolated using the
rules above. Otherwise the interpolation is determined by the property
rules. If the property extends its list by repeating values, then this
- repeated form will be used in the interpolation (<span
- class="prop-name">'background-position'</span> in an example of a
- property that would transition between lists of different lengths). If
+ repeated form will be used in the interpolation (<code class="property">'background-position'</code>
+ is an example of a property that would transition between lists of different lengths). If
the property does not allow extending its list, then no interpolation
will occur.
</li>
Received on Monday, 30 January 2012 16:08:46 UTC