Re: [css3-transitions] Transitions and multiple backgrounds

On Friday 2011-04-08 05:42 +1000, Dean Jackson wrote:
> On 08/04/2011, at 4:46 AM, Sylvain Galineau wrote:
> > Say we layer three backgrounds:
> > 
> >   E {
> >     background-image: url('top.png'), url('middle.png'), url('bottom.png');
> >       background-position: 0px 0px, 10px 10px, 40px 40px;
> >     transition: background-position;
> >   }
> > 
> > ..then transition background-position like so:
> > 
> >   E:hover {
> >     background-position:10px 10px, 0px 0px;
> >   } 
> > 
> > In '3.1. Layering multiple background images' [1], css3-background tells us:
> > 
> > # The background of a box can have multiple layers in CSS3. The number of layers is determined 
> > # by the number of comma-separated values in the 'background-image' property. Note that a value 
> > # of 'none' still creates a layer. 
> > # Each of the images is sized, positioned, and tiled according to the corresponding value in the 
> > # other background properties. The lists are matched up from the first value: excess values at 
> > # the end are not used. If a property doesn't have enough comma-separated values to match the 
> > # number of layers, the UA must calculate its used value by repeating the list of values until 
> > # there are enough.
> > 
> > In '6. Animation of property types' [2], css3-transitions says:
> > 
> > # length: interpolated as real numbers. 
> > # percentage: interpolated as real numbers.
> > # [snip]
> > # space-separated list of above: If the lists have the same number of items, each item in 
> > # the list is interpolated using the rules above. Otherwise, no interpolation (unless stated 
> > # otherwise above).
> 
> I think I wrote that piece of text, and I probably wasn't thinking of the case given above.


So I think we should require matched lengths for the properties
whose lengths matter:  in other words, we should still require
matched lengths for background-image.  I have no idea what it would
mean to do otherwise.  But for the properties whose values get
repeated to match the length of the background-image list, we
shouldn't require matched lengths.

Then there's the question of what the computed value should be
during the animation.  I think, however, there's a relatively simple
solution, which I implemented in Gecko for animation of
stroke-dasharray.

We should define two animation concepts, "list" and "repeatable
list".

A "list" is the current definition; to interpolate, the lengths of
both lists must match.

A "repeatable list" yields an interpolation result whose length is
the least common multiple (lcm) of the lengths of the two input
lists.  Both input lists are repeated to that length, and then
interpolation is value-by-value on the items in that full list.

We can then define all the background-* list properties except for
background-image, and stroke-dasharray, to be a repeatable list.

-David

-- 
𝄞   L. David Baron                         http://dbaron.org/   𝄂
𝄢   Mozilla                           http://www.mozilla.org/   𝄂

Received on Monday, 4 February 2013 16:48:23 UTC