8000 Added special interpolating rules for cross-fade() to avoid nesting w… · w3c/csswg-drafts@9d3c366 · GitHub
Skip to content

Commit 9d3c366

Browse files
tabatkinstabatkins
committed
Added special interpolating rules for cross-fade() to avoid nesting when possible.
1 parent f8da744 commit 9d3c366

2 files changed

Lines changed: 46 additions & 7 deletions

File tree

‎css3-images/Overview.html‎

Lines changed: 26 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -237,7 +237,10 @@ <h2 class="no-num no-toc" id=contents> Table of contents</h2>
237237
<li><a href="#interpolating-images"><span class=secno>9.1. </span>
238238
Interpolating <i>&lt;image></i></a>
239239

240-
<li><a href="#interpolating-gradients"><span class=secno>9.2. </span>
240+
<li><a href="#interpolating-image-combinations"><span class=secno>9.2.
241+
</span> Interpolating <i>&lt;image-combination></i></a>
242+
243+
<li><a href="#interpolating-gradients"><span class=secno>9.3. </span>
241244
Interpolating <i>&lt;gradient></i></a>
242245
</ul>
243246

@@ -2250,7 +2253,7 @@ <h2 id=interpolation><span class=secno>9. </span> Interpolation</h2>
22502253
and is set to a value that represents the progress through the transition,
22512254
based on the duration of the transition, the elapsed time, and the timing
22522255
function in use. For example, with a linear timing function and a 1s
2253-
duration, after .3s t is equal to .3.</p>
2256+
duration, after .3s t is equal to 30%.</p>
22542257
<!-- ====================================================================== -->
22552258

22562259
<h3 id=interpolating-images><span class=secno>9.1. </span> Interpolating <a
@@ -2264,9 +2267,27 @@ <h3 id=interpolating-images><span class=secno>9.1. </span> Interpolating <a
22642267

22652268
<p>In specific terms, at each point in the interpolation the image is equal
22662269
to <code>cross-fade(&lt;start image>, &lt;end image>, t)</code>.</p>
2267-
<!-- ====================================================================== -->
2268-
2269-
<h3 id=interpolating-gradients><span class=secno>9.2. </span> Interpolating
2270+
<!-- ======================================================================= -->
2271+
2272+
<h3 id=interpolating-image-combinations><span class=secno>9.2. </span>
2273+
Interpolating <a
2274+
href="#ltimage-combination"><i>&lt;image-combination></i></a></h3>
2275+
2276+
<p>Combinations of the same images at different progress points can be
2277+
smoothly animated by simply animating the progress. Theoretically, this
2278+
produces the same visual effect as the generic &lt;image> interpolation
2279+
would; in practice, implementations may have slight differences due to how
2280+
they scale or rasterize images. Additionally, the generic &lt;image>
2281+
interpolation produces nested cross-fade() functions, which is undesirable
2282+
if it can be avoided.
2283+
2284+
<p>If both the starting and ending images are &lt;image-combination>s with
2285+
the same image arguments, they must be interpolated by interpolating their
2286+
third argument, the percentage. Otherwise, they must be interpolated as
2287+
generic &lt;image>s.</p>
2288+
<!-- ======================================================================= -->
2289+
2290+
<h3 id=interpolating-gradients><span class=secno>9.3. </span> Interpolating
22702291
<a href="#ltgradient"><i>&lt;gradient></i></a></h3>
22712292

22722293
<p>Gradient images can be interpolated directly in CSS transitions and

‎css3-images/Overview.src.html‎

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1773,7 +1773,7 @@ <h2 id='interpolation'>
17731773
number which starts at 0% and goes to 100%, and is set to a value that represents
17741774
the progress through the transition, based on the duration of the transition,
17751775
the elapsed time, and the timing function in use. For example, with a linear
1776-
timing function and a 1s duration, after .3s t is equal to .3.</p>
1776+
timing function and a 1s duration, after .3s t is equal to 30%.</p>
17771777

17781778
<!-- ====================================================================== -->
17791779

@@ -1788,7 +1788,25 @@ <h3 id='interpolating-images'>
17881788
<p>In specific terms, at each point in the interpolation the image is equal
17891789
to <code>cross-fade(&lt;start image>, &lt;end image>, t)</code>.</p>
17901790

1791-
<!-- ====================================================================== -->
1791+
<!-- ======================================================================= -->
1792+
1793+
<h3 id='interpolating-image-combinations'>
1794+
Interpolating <i>&lt;image-combination></i></h3>
1795+
1796+
<p>Combinations of the same images at different progress points can be
1797+
smoothly animated by simply animating the progress. Theoretically, this
1798+
produces the same visual effect as the generic &lt;image> interpolation
1799+
would; in practice, implementations may have slight differences due to
1800+
how they scale or rasterize images. Additionally, the generic &lt;image>
1801+
interpolation produces nested cross-fade() functions, which is undesirable
1802+
if it can be avoided.</p>
1803+
1804+
<p>If both the starting and ending images are &lt;image-combination>s with the
1805+
same image arguments, they must be interpolated by interpolating their third
1806+
argument, the percentage. Otherwise, they must be interpolated as generic
1807+
&lt;image>s.</p>
1808+
1809+
<!-- ======================================================================= -->
17921810

17931811
<h3 id='interpolating-gradients'>
17941812
Interpolating <i>&lt;gradient></i></h3>

0 commit comments

Comments
 (0)