[css-transitions] interpolation refinements

Hey all,

I've been looking at how background-position animates (or not) today to
figure out how best to define interpolation for <basic-shape>s. I'm
assuming I can define some fairly simplistic interpolation
(circle-to-circle, etc.) without closing the door on more complex
interpolation (inset-to-circle, for example). If I say "no interpolation
is specified" then I assume a later module can improve things if it's
deemed important enough.

Here's some feedback and questions on the transitions draft:

1. I don't see a definition for how to deal with identical keywords

It appears that browsers do consistently animate between
'background-position: left top 50px' and 'background-position: left top
100px', but I don't see where that's defined. We could add some text to
section 6 that says that if V-start and V-end are identical, there's an
identity interpolation thatıs used. This would cover this basic <position>
case that everyone appears to implement. I've added this to the
interpolation of <basic-shape> for now.

2. I don't see a definition for how to deal with non-identical keywords

In most cases, I assume keyword interpolation needs to be defined by the
specification that defines the keywords. But <position> keywords are being
used in several places, so it might be useful to define how to interpolate
between 'left' and 'right' as used in <position> in the transitions spec
itself. I don't see consistent behavior between browsers here yet, so
perhaps this is an 'improve later' issue. If I try to animate between
'background-position: left top 50px' and 'background-position: right top
100px' then Gecko does animate between left and right, Chrome does not
(but animates up and down), and IE10 shows Chrome behavior on page load,
but if you put the animation on a :hover it switches up and matches Gecko
behavior.

3. Is a canonical order for computed values required?

It appears that animating between 'background-position: left top 50px' and
'background-position: top 50px left' works just fine. The
background-position property does say that the computed value has four
values in the list (so I assume that 'left' gets expanded to 'left 0px'),
but does not specify an order between the 'top' and 'left' values. Do we
just assume that browsers will use a consistent order for computed values
so that the list values line up? Is there any value in specifying a
consistent order across browsers?

4. Do computed values need to fill in optional arguments?

I don't see where the radial-gradient syntax defines its computed value -
background-image just says 'as specified'. If and when we decide to allow
animations of gradients, will we need to specify a computed value that
includes all of the optional parameters, so that we can interpolate
'radial-gradient(3em, black, white)' with 'radial-gradient(circle 3em at
50% 50%, black, white)'?

Thanks,

Alan

Received on Friday, 22 November 2013 00:53:47 UTC