- From: Tab Atkins Jr.. via cvs-syncmail <cvsmail@w3.org>
- Date: Thu, 26 May 2011 21:34:00 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-images
In directory hutz:/tmp/cvs-serv12902
Modified Files:
Overview.html Overview.src.html
Log Message:
Added special interpolating rules for cross-fade() to avoid nesting when possible.
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-images/Overview.html,v
retrieving revision 1.106
retrieving revision 1.107
diff -u -d -r1.106 -r1.107
--- Overview.html 26 May 2011 16:44:03 -0000 1.106
+++ Overview.html 26 May 2011 21:33:57 -0000 1.107
@@ -237,7 +237,10 @@
<li><a href="#interpolating-images"><span class=secno>9.1. </span>
Interpolating <i><image></i></a>
- <li><a href="#interpolating-gradients"><span class=secno>9.2. </span>
+ <li><a href="#interpolating-image-combinations"><span class=secno>9.2.
+ </span> Interpolating <i><image-combination></i></a>
+
+ <li><a href="#interpolating-gradients"><span class=secno>9.3. </span>
Interpolating <i><gradient></i></a>
</ul>
@@ -2250,7 +2253,7 @@
and is set to a value that represents the progress through the transition,
based on the duration of the transition, the elapsed time, and the timing
function in use. For example, with a linear timing function and a 1s
- duration, after .3s t is equal to .3.</p>
+ duration, after .3s t is equal to 30%.</p>
<!-- ====================================================================== -->
<h3 id=interpolating-images><span class=secno>9.1. </span> Interpolating <a
@@ -2264,9 +2267,27 @@
<p>In specific terms, at each point in the interpolation the image is equal
to <code>cross-fade(<start image>, <end image>, t)</code>.</p>
- <!-- ====================================================================== -->
+ <!-- ======================================================================= -->
- <h3 id=interpolating-gradients><span class=secno>9.2. </span> Interpolating
+ <h3 id=interpolating-image-combinations><span class=secno>9.2. </span>
+ Interpolating <a
+ href="#ltimage-combination"><i><image-combination></i></a></h3>
+
+ <p>Combinations of the same images at different progress points can be
+ smoothly animated by simply animating the progress. Theoretically, this
+ produces the same visual effect as the generic <image> interpolation
+ would; in practice, implementations may have slight differences due to how
+ they scale or rasterize images. Additionally, the generic <image>
+ interpolation produces nested cross-fade() functions, which is undesirable
+ if it can be avoided.
+
+ <p>If both the starting and ending images are <image-combination>s with
+ the same image arguments, they must be interpolated by interpolating their
+ third argument, the percentage. Otherwise, they must be interpolated as
+ generic <image>s.</p>
+ <!-- ======================================================================= -->
+
+ <h3 id=interpolating-gradients><span class=secno>9.3. </span> Interpolating
<a href="#ltgradient"><i><gradient></i></a></h3>
<p>Gradient images can be interpolated directly in CSS transitions and
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-images/Overview.src.html,v
retrieving revision 1.110
retrieving revision 1.111
diff -u -d -r1.110 -r1.111
--- Overview.src.html 26 May 2011 16:44:03 -0000 1.110
+++ Overview.src.html 26 May 2011 21:33:57 -0000 1.111
@@ -1773,7 +1773,7 @@
number which starts at 0% and goes to 100%, and is set to a value that represents
the progress through the transition, based on the duration of the transition,
the elapsed time, and the timing function in use. For example, with a linear
- timing function and a 1s duration, after .3s t is equal to .3.</p>
+ timing function and a 1s duration, after .3s t is equal to 30%.</p>
<!-- ====================================================================== -->
@@ -1788,7 +1788,25 @@
<p>In specific terms, at each point in the interpolation the image is equal
to <code>cross-fade(<start image>, <end image>, t)</code>.</p>
-<!-- ====================================================================== -->
+<!-- ======================================================================= -->
+
+<h3 id='interpolating-image-combinations'>
+Interpolating <i><image-combination></i></h3>
+
+ <p>Combinations of the same images at different progress points can be
+ smoothly animated by simply animating the progress. Theoretically, this
+ produces the same visual effect as the generic <image> interpolation
+ would; in practice, implementations may have slight differences due to
+ how they scale or rasterize images. Additionally, the generic <image>
+ interpolation produces nested cross-fade() functions, which is undesirable
+ if it can be avoided.</p>
+
+ <p>If both the starting and ending images are <image-combination>s with the
+ same image arguments, they must be interpolated by interpolating their third
+ argument, the percentage. Otherwise, they must be interpolated as generic
+ <image>s.</p>
+
+<!-- ======================================================================= -->
<h3 id='interpolating-gradients'>
Interpolating <i><gradient></i></h3>
Received on Thursday, 26 May 2011 21:34:01 UTC